reactjs 管理从不同组件访问和发送的数据并处理它们

9rygscc1  于 2023-01-05  发布在  React
关注(0)|答案(1)|浏览(93)

我正在尝试创建一个layer,在那里我可以处理来自用户的不同操作。
例如,当您click a div时,创建一个layer of type 1,然后将其发送到layer component以开始显示dropdown的列表(例如)。
由于我是新的React,我做了一些事情,但它扔给我吨的错误,它似乎不工作。
这是我的作品https://codesandbox.io/s/laughing-agnesi-47suvp
我想要的是:

  • 单击.group-item(来自Header组件)时,将.group-item you clicked对应的playerID另存为对象(以及.group-item的clientX和clientY),然后传递一个函数以在layers component中显示.dropdown,其中还将包含您从Header component存储的数据(ID、clientX、clientY)
x33g5p2x

x33g5p2x1#

确实有几个错误:

  • 在某些地方,您访问layer.type,但创建了一个具有属性layerTypelayer;确保前后一致
  • 当你添加一个新层时,确保建立一个 * 数组 *:
const addNewLayer = (object) => {
  listLayers((layerObject) => ([ // Note the square brackets, instead of curly braces
    ...layerObject, // Previous array of layers
    object // New layer to be added
  ]));
};
  • Layers.js中,不要直接更改函数组件主体根的状态:这创建了无限渲染循环(每当其状态改变时函数重新运行);在您情况下,可以将其 Package 在useEffect中,该useEffect依赖于layers属性:
useEffect(() => {
  layers.forEach((l) => {
    if (l.layerType == 1) {
      console.log("layer type 1 found! .. set .dropdown to be seen");
      setLayerActive(true);
    }
  });
}, [layers]); // Re-run only if the list of layers changes

演示:https://codesandbox.io/s/quiet-browser-iiip34

相关问题