React 不呈現 Axios 調用的 map function

Question

我正在嘗試制作一個購物車表，其中顯示圖像、產品名稱和刪除按鈕。 我從 localStorage 中獲取了每個產品的 ID，並使用 Axios.get(by id) 調用該 ID 的所有數據。

我創建了一個表格來顯示產品的價格、圖像和名稱，但是 my.map function 沒有在網站上顯示信息（即使我可以通過 console.log 看到它）。 這是代碼：

import Axios from "axios";
import React from "react";

function ClientCardBlock() {
  let memory = window.JSON.parse(localStorage.getItem("toy"));
  console.log(memory); **this log shows me that all the IDs are now in an array**

  const renderItems = () => {
    memory.map(
      async (toy_id) =>
        await Axios.get(`http://************/${toy_id}`).then(
          (response) => {
            const toy = response.data;
            console.log(toy.price); **this log show me the price of each toy, so it's working**
            return (
              <tr key={toy._id}>
                <th>
                  <img
                    alt=""
                    className="card-img-top embed-responsive-item"
                    src={`http://*********/${toy.images}`}
                  />
                </th>
                <th>$ {toy.price}</th>
                <th>
                  <button>Remove</button>
                </th>
              </tr>
            );
          }
        )
    );
  };

  return (
    <div>
      <table className="table table-bordered">
        <thead>
          <tr>
            <th scope="col">Image product</th>
            <th scope="col">Product</th>
            <th scope="col">Remove</th>
          </tr>
        </thead>
        <thead>{renderItems()}</thead>
      </table>
    </div>
  );
}

export default ClientCardBlock;

Answer 1

通常你可以只改變它，使 renderItems 成為一個功能組件。

function RenderItems() {
  return memory.map...(etc)
}

...

<thead><RenderItems /></thead>

但由於這是一個異步 function，因此您需要使用 useEffect。 這個useEffect獲取數據，保存到你的組件state里面，然后一旦存在，后面再渲染。 關鍵點是將提取與渲染分開。

function ClientCardBlock() {
  const [data, setData] = useState([]);

  useEffect(() => {
    /* this runs on component mount */
    const memory = window.JSON.parse(localStorage.getItem("toy"));

    Promise.all(memory.map((toy_id) => Axios
                .get(`http://************/${toy_id}`)
                .then((response) => response.data)))
                /* Wait on the Promise.All */
                .then(newData => {
                  /* Set the data locally */
                  setData(newData);
                });
  }, []);

  return (
    <div>
      <table className="table table-bordered">
        <thead>
          <tr>
            <th scope="col">Image product</th>
            <th scope="col">Product</th>
            <th scope="col">Remove</th>
          </tr>
        </thead>
        <thead>
          {data.map(toy => (
              <tr key={toy._id}>
                <th>
                  <img
                    alt=""
                    className="card-img-top embed-responsive-item"
                    src={`http://*********/${toy.images}`}
                  />
                </th>
                <th>$ {toy.price}</th>
                <th>
                  <button>Remove</button>
                </th>
              </tr>
           )}
        </thead>
      </table>
    </div>
  );
}

export default ClientCardBlock;