Реагировать на проблему собственной сортировки

Question

Я извлекаю файл JSON и сохраняю его в двух массивах и сортирую один из них по его скорости, как показано ниже, к сожалению, он сортирует два массива RecentPro и RatingPro, но желаемый массив для сортировки имеет значение onlyProProPro

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 для ссылки на один и тот же массив.Затем вы изменяете этот массив, что приведет к тому, что изменение будет отражено как в 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 */ }
  }