异步后端调用上的 useEffect 和 setState 不重新渲染组件答案

【问题标题】：useEffect and setState on async backend calls not re-rendering component异步后端调用上的 useEffect 和 setState 不重新渲染组件
【发布时间】：2020-06-09 18:25:03
【问题描述】：

我们有一个 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}
    />
  );
}

搜索从后端异步获取数据，这需要几秒钟，并通过 useEffect 完成，出于某种原因，useEffect 中的 setKeys 不会重新渲染 cardList 组件。当我在世博会上使用热重载人为刷新时，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>
  );

【问题讨论】：

标签： react-native react-hooks expo

【解决方案1】：

setState 出于性能原因是异步的，不应仅仅因为状态更新未正确执行而强制同步。

您可以像这样简单地定义 useState：

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

【讨论】：

这如何回答这个问题？