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

Question

我正在探索 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

Answer 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]);
};

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

How to use useState with React-redux-firebase to re-render

javascript

reactjs

react-redux-firebase

use-state