Question

我正在尝试通过从Contentful API获取的useContext（）传递一些数据，但是我不知道该怎么做。有人可以告诉我我在做什么错吗？

首先，我获取数据并将其保存为以下状态：

const [products, setProducts] = useState([]);

function getProducts() {
   Client.getEntries("products")
      .then((entry) => {
         entry.items.map((item) => {
            setProducts(products.push(item));
      });
   })
      .catch((err) => console.log(err));
}

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

然后我将状态传递给提供者：

<ProductContext.Provider value={{ products }}>
   //children
</ProductContext.Provider>

当我在getProducts（）函数中记录“产品”时，我得到了一个包含一堆对象的数组，但是当我尝试将其映射到应用程序中的其他位置时，我得到了product.map不是一个函数。

import { ProductContext } from "../../../Context";

export default function ProductList() {
  const { products } = useContext(ProductContext);

  return (
    <Container>
      {products.map(product => {
        //do something
      })}
    </Container>
  );
}

Answer 1

.then((entry) => {
         entry.items.map((item) => {
            setProducts(products.push(item));
      });

可以简化为

.then((entry) => setProducts(entry.items));

也许不是原因，但可能是对setProducts()的多次调用导致了一些延迟（状态集是异步的）

如何使用useContext从API传递数据？

1 个答案: