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 节点不是一个好方法。