REACT-NATIVE: Flatlist не обновляется при изменении реквизита - PullRequest
Новая
       118

REACT-NATIVE: Flatlist не обновляется при изменении реквизита

0 голосов
/ 20 июня 2020

У меня есть страница элемента, на которой я визуализирую плоский список комментариев, относящихся к элементу, проблема, которая у меня возникает, когда я меняю элемент, вызов api с новыми реквизитами (itemId) не выполняется и комментарии из отображается предыдущий элемент.

Я уверен, что новый itemId передается на экран, поскольку все остальное (имя, изображение, описание ...)

Способ достижения страница элемента проходит через страницу магазина, отображающую список изображений элементов (где я передаю все реквизиты, необходимые для отображения элемента на странице элемента)

Я замечаю, что когда я нахожусь на странице элемента и затем нажмите обратно на go, чтобы вернуться на страницу магазина, а затем нажмите на другой элемент, на странице элемента отображаются данные предыдущего элемента в течение полсекунды перед обновлением, но список просто никогда не обновляется, он продолжает звонить со старым идентификатором элемента . Я использую fetch для получения списка, я также пробовал с ax ios, результат тот же. 

 componentDidMount() {
    this._isMounted = true;

    const { navigation } = this.props;

this.focusListener = navigation.addListener('didFocus', async () => {
    await fetch("https://api..." + navigation.getParam('itemId'))
            .then(response => response.json())
            .then((responseJson) => {
                this.setState({
                    loading: false,
                    dataSource: responseJson
                })
                console.log("response Comments:" + JSON.stringify(responseJson));
                console.log('the state of item id -->', this.props.navigation.getParam('itemId'))
            });
   }
}

когда я console.log, я получаю правильный itemId, но похоже, что вызов происходит прежде, чем он получит новые реквизиты ...

Я относительно новичок в React Native и кодировании в целом, поэтому, пожалуйста, дайте мне знать, если мне нужно быть более понятным.

Спасибо за вашу помощь !

1 Ответ

0 голосов
/ 20 июня 2020

Я столкнулся с аналогичной проблемой. Это произошло потому, что props из FlatList осталось прежним. Хотя для отдельного renderItem он менялся, но компонент FlatList не знал об этом.

Чтобы решить эту проблему, вы можете использовать extraData prop.

Итак , если вы установите extraData prop в FlatList, например extraData={this.props}, это приведет к принудительной перезагрузке списка при изменении любого из свойств родительского компонента.

...