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

Question

我正在使用 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 中。如何解决这个问题，以便在应用加载时所有项目都在屏幕上？？

Answer 1

知道状态更新会受到闭包的影响并且是异步的，因此在调用 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>