useEffect и setState для асинхронных вызовов c, не вызывающих повторный рендеринг компонента

Question

У нас есть собственный компонент реагирования cardList, который является дочерним компонентом поискового компонента.

export default function CardList(props) {

  keyExtractor = (item, index) => index.toString()

  renderItem = ({ item }) => (
      <ListItem
        title={item.name}
        subtitle={item.subtitle}
        leftAvatar={{
          source: item.avatar_url && { uri: item.avatar_url },
          title: item.name[0]
        }}
        bottomDivider
        chevron
      />
  )

  return (
    <FlatList
      keyExtractor={keyExtractor}
      data={props.images}
      renderItem={renderItem}
    />
  );
}

Поиск извлекает данные асинхронно c из бэкэнда, что занимает пару секунд и выполняется с помощью useEffect. По какой-то причине setKeys в useEffect не выполняет повторную визуализацию компонента cardList. Когда я искусственно обновляю sh с помощью горячей перезагрузки на выставке, cardList отображается нормально. Почему setKeys (useState) не отображает компонент?

Спасибо за любую помощь!

  const [keys, setKeys] = useState([]);
  useEffect(() => {
    const fetchData = async () => {
      const imgkeys = await << 5 second long backend call >>;
      setKeys(imgkeys);
    }
    fetchData();
  }, []);
  return (
    <View>
      <View style={{
        padding: 5,
         }}>  
        { (keys) && (keys.length>0) && <CardList images={keys}/> }
      </View>
    </View>
  );

Answer 1

setState является асинхронным по соображениям производительности и не должен быть вынужден быть синхронным только из-за того, что обновления состояний выполнялись неправильно.

Вы можете просто определить useState следующим образом:

const [, forceUpdate] = React.useState(0);
forceUpdate(n => !n)