javascript - 如何使用 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 中拥有的两种产品。只有一个正在渲染......所以我不明白。状态更新时不应该重新渲染吗？

谢谢您的回复

我们可以看到没有重新渲染

标签： javascriptreactjsuse-statereact-redux-firebase

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