arrays - react native 排序问题

Question

我正在获取一个 JSON 文件并将其存储在两个数组中，并按其速率对其中一个进行排序，如下所示，不幸的是，它对 recentPro 和 ratedPro 这两个数组进行排序，但要排序的所需数组仅为 ratedPro

fetch(url)
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          recentPro: responseJson.products,
          ratedPro:responseJson.products,  
        },
         function() {

           //Sort by rate
           const ratedpro= this.state.ratedPro.sort(function(a, b) {
            return Number(b.rate) - Number(a.rate);
        })
        this.setState({
            ratedPro: ratedpro,     
        })  

        })

平面列表

<FlatList
                data={this.state.ratedPro}
                renderItem={this.mostrated}
                keyExtractor={item => item.pro_name}/>


<FlatList
                data={this.state.recentPro}
                renderItem={this.rederItem}
                keyExtractor={item => item.pro_id} />

Answer 1

您正在分配 this.state.recentPro 和 this.state.ratedPro 以引用同一个数组。然后，您正在改变该数组，这将导致更改反射(reflect)在 this.state.recentPro 和 this.state.ratedPro 中，因为这两个变量都引用相同的变量(现在变异了)数组。

您可以使用 slice() 浅拷贝数组以实现对两个数组的不同排序:

    this.setState({
      recentPro: responseJson.products.slice(),
      ratedPro:responseJson.products.slice(),  
    },

您还通过多次调用 setState 触发了不必要的和过早的渲染，请考虑以下更简洁的解决方案，该解决方案还取消了对 response 的一些健全性检查以防止您的应用程序从依赖于您从中获取数据的 API 的响应:

fetch(url)
  .then(response => response.json())
  .then(responseJson => {
    const { products } = responseJson

    if (products && Array.isArray(products)) {  
      const recentPro = products.slice()

      const ratedPro = products.slice().sort((a, b) => Number(b.rate) - Number(a.rate))

      this.setState({
        recentPro,
        ratedPro,  
      })
    } else { /* display error to user */ }
  }