React 和道具深度的問題

Question

我不知道為什么會這樣。 當我嘗試將 setArray 設置為 data.map 時，React 抱怨，我不知道為什么。 以下是關鍵組件的代碼。 我也嘗試將 useState 鈎子移動到 的父元素中並將其作為道具傳遞，但我得到了同樣的錯誤

我的數據組件：

export let DataContext = createContext();

export let DataProvider = (props) => {
  let [array, setArray] = useState([]);
  let [data, setData] = useState([
    {
      name: "Toshiba",
      desc: "Laptop copmuter",
      price: 299,
      url:
        "https://images.pexels.com/photos/3975677/pexels-photo-3975677.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
      path: "Toshiba",
      type: "laptop",
      details:
        "Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space",
    },
    {
      name: "Lenovo",
      desc: "Laptop copmuter",
      price: 399,
      url:
        "https://images.pexels.com/photos/3975677/pexels-photo-3975677.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
      path: "Lenovo",
      type: "laptop",
      details:
        "Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this spaceSome words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space",
    },
    {
      name: "Asus",
      desc: "Laptop copmuter",
      price: 199,
      url:
        "https://images.pexels.com/photos/3975677/pexels-photo-3975677.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
      path: "Asus",
      type: "laptop",
      details:
        "Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space",
    },
    {
      name: "HP",
      desc: "Laptop copmuter",
      price: 299,
      type: "laptop",
      url:
        "https://images.pexels.com/photos/3975677/pexels-photo-3975677.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
      path: "HP",
      details:
        "Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space  Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space ",
    },
    {
      name: "Apple",
      desc: "Laptop copmuter",
      price: 299,
      type: "laptop",
      url:
        "https://images.pexels.com/photos/3975677/pexels-photo-3975677.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
      path: "Apple",
      details:
        "Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this spaceSome words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space",
    },
    {
      name: "Apple",
      desc: "Android",
      price: 299,
      type: "mobile",
      url:
        "https://images.pexels.com/photos/3975677/pexels-photo-3975677.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
      path: "Apple",
      details:
        "Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this spaceSome words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space",
    },
  ]);

  return (
    <DataContext.Provider value={[data, setData, array, setArray]}>
      {props.children}
    </DataContext.Provider>
  );

****我收到錯誤的項目組件：****

function Item() {
  let [data, setData, array, setArray] = useContext(DataContext);

  let newAr = data.map((item) => {
    return (
      <div className="Item">
        <img src={item.url} />
        <h1>{item.name}</h1>
        <p>{item.desc}</p>
        <h2>{item.price}</h2>
        <Link to={`/product/${item.path}`}>
          <h3>See details</h3>
        </Link>
      </div>
    );
  });

  setArray([newAr]);

  return <>{array}</>;
}

Answer 1

你不應該做

  setArray([newAr]);

在組件內部。 它需要在事件處理程序中或在 useEffect 掛鈎中完成。

現在，您只需遞歸更新組件。 組件渲染 - 組件更新 newAr - 它獲取信號集 newAr 被更新 - 它重新渲染組件 - 組件更新 newAr - 等等 它陷入一個永無止境的循環。

嘗試

  useEffect(() => {
    setArray([newAr]);
  }, []) 

這將僅在安裝組件時更新 newAr。

PS 在 state 中存儲 React 節點不是一個好方法。