react native中useEffect中数据更新后如何加载UI

如何解决react native中useEffect中数据更新后如何加载UI

我正在使用 useEffect 将来自 redux 的所有数据保存在一个状态中。

下面是我的代码：

const [items,setItems] = useState();
React.useEffect(() => {
    setItems(createMenuReducer.data.product);
    console.log("item",items);
},[items]);

<ScrollView>
    {createMenuReducer &&
        items?.map((item,index) => {
            return (
                <ItemComponent
                    item={item}
                />
            );
        })}
</ScrollView>

console.log 输出：

item undefined

但是当我再次单击保存时，所有项目都得到了安慰：

item (10) [{…},{…},{…}]

我尝试更新状态，认为它也会更新 UI，但这并没有发生。第一次加载时我得到一个空白页面，但是当我再次单击保存时，所有项目都显示在 UI 中。如何解决此问题，以便在应用加载时所有项目都在屏幕上？

解决方法

要知道状态更新受闭包的影响并且是异步的，因此在调用 setItems 后不会立即处理您的项目值，但它将在下一次渲染中可用。

另请注意，您必须在 createMenuReducer 数据更新时更新您的项目，因此将其添加为 useEffect 而不是项目的依赖项

const [items,setItems] = useState([]);
React.useEffect(() => {
    setItems(createMenuReducer.data.product);
},[createMenuReducer?.data.product]);

console.log(items);

<ScrollView>
    {items.map((item,index) => {
            return (
                <ItemComponent
                    item={item}
                />
            );
        })}
</ScrollView>

但是在大​​多数情况下，您不需要将 props 值复制到 state 中，而应该直接使用 props 中的数据

<ScrollView>
        {createMenuReducer?.data?.product?.map((item,index) => {
                return (
                    <ItemComponent
                        item={item}
                    />
                );
            })}
    </ScrollView>