使用 redux 时如何重新渲染 FlatList React Native答案

【问题标题】：How to re render FlatList React Native when working with redux使用 redux 时如何重新渲染 FlatList React Native
【发布时间】：2021-06-01 05:21:21
【问题描述】：

我是 React Native 的新手，我在使用 FlatList 时遇到了问题。我将 extraData 分配给 redux 值，但在 redux 更新时它不会重新渲染 FlatList。我想我应该把它分配给一个本地状态，但是我得到了太多的重新渲染错误。非常感谢任何帮助我的人！下面是我的代码

function CartScreen() {
const cart = useSelector((state) => state.cartReducer);
console.log(cart);
const dispatch = useDispatch();

useEffect(() => {
    dispatch(cartActions.refreshCartAction(cart));
}, []);

const renderItem = ({ item }) => {
    return <CartItem book={item} />;
};

return (
    <View>
        <FlatList
            data={cart}
            renderItem={renderItem}
            keyExtractor={(item) => item._id.toString()}
            extraData={cart}
        />
    </View>
);
}

export default CartScreen;

【问题讨论】：

请用你的 redux 和 reducer 实现代码提供更广泛的图片。
你遇到了哪个错误？

标签： react-native redux flatlist

【解决方案1】：

我在解决问题的 redux 操作中发现了一个错误。谢谢大家！！

【讨论】：

【解决方案2】：

如果全局状态下的数据是异步的你必须这样做

{cart  && <FlatList
          data={cart}
          renderItem={renderItem}
          keyExtractor={(item) => item._id.toString()}
          extraData={cart}
       />
}

【讨论】：