如何使用 useState 和 React-redux-firebase 重新渲染答案

【问题标题】：How to use useState with React-redux-firebase to re-render如何使用 useState 和 React-redux-firebase 重新渲染
【发布时间】：2021-01-12 04:54:49
【问题描述】：

我正在探索带有 react-redux-firebase 的钩子，但我的“setDataProducts”表现异常。我使用 useEffect() 就像我可以使用 componentDidMount() 但不确定这是否是正确的方法。

export default function ProductList() {
    const [dataProducts, setDataProducts] = useState([]);
    const firestore = useFirestore();

    const fetchProducts = async () => {
        const response = firestore.collection("products");
        const data = await response.get();

        data.docs.forEach((product) => {
            setDataProducts([...dataProducts, product.data()]);
            console.log(product.data());
        });
    };

    useEffect(() => {
        fetchProducts();
    }, []);

    return (
        <div>
            {isLoaded &&
                dataProducts.map((product) => {
                    return (
                        <div>
                            <h4>{product.title}</h4>
                            <h3>{product.price}</h3>
                        </div>
                    );
                })}
        </div>
    );
}

我无法渲染 Firestore 中的两种产品。只有一个正在渲染......所以我不明白。状态更新时不应该重新渲染吗？

感谢回复

We can see there was not rerendering

【问题讨论】：

标签： javascript reactjs use-state react-redux-firebase

【解决方案1】：

我认为是因为您在 dataProducts 更新之前再次调用了 setDataProducts。

请将 fetchProducts 方法替换为以下代码：

const fetchProducts = async () => {
  const response = firestore.collection("products");
  const data = await response.get();

  const newProducts = data.docs.map((product) => product.data());
  console.log(newProducts);
  setDataProducts([...dataProducts, ...newProducts]);
};

【讨论】：