React 组件 - 从 .then 内部返回一个 div

Question

export default function Products() {
  const allProducts = [];

  // Get all products

  fetch('/api/getAllProducts')
  .then((response) => {
    return response.text();
  })
  .then((j) => {
    return JSON.parse(j);
  })
  .then ((pj) => {

    // For each product, create a child element and add it to allProducts array 
    pj.map((pi, index) => {
      // Only pass first 8 products to allProducts array
      if (index < 8){
        allProducts.push(pi.shortdescription);
      }
    })
  })

  // If error
  .catch(error => {
      console.log("ERROR " + error);
  })

  return (
    <div className="products">
      <div className="header">Products</div>
      <div className="strap">See all of the quilts you can buy</div>
      <div className="productsflex">
        {allProducts}
      </div>
  </div>
  ); 
}

我正在尝试将数组的内容作为组件的一部分返回。

我的问题似乎是我只能从 then 中填充数组。我从 then 返回的任何内容都是一个承诺，因此如果我尝试从 then 中返回等，它不会在屏幕上呈现任何内容。

我尝试在 fetch/then 之外启动一个数组，用 Promise 的值填充它，然后在 fetch/then 之外使用它并返回，但是上面的返回代码在 Promise 返回之前执行，所以数组是为空且不会在屏幕上呈现

我该如何解决这个问题？

谢谢！

请参阅上面的代码片段和说明

Answer 1

首先，

allProducts

应该是一个

状态值：

const [allProducts, setAllProducts] = useState([]); 其次，

fetch

操作应该发生在

effect中，而不是在组件的每个渲染上：

useEffect(() => {
  // put your entire fetch operation here
}, []);

第三，在

.then()

 回调中，您将使用数据更新状态（不会误用 

.map()

）：

.then((pj) => {
  setAllProducts(pj.slice(0, 8));
})

顺便说一句，您可能还想渲染某种结构，而不是仅仅将数组转储到标记中。例如：

<div className="productsflex">
  <ul>
    {allProducts.map((p, i) => <li key={i}>{p}</li>)}
  </ul>
</div>

您想使用的结构由您决定。但一般来说，最好明确您想要的结构，而不是假设原始数组将按预期呈现。