Question

我有一个反应函数组件，它根据链接点击时的用户事件设置一个 id 数组（它打开一个带有一些可以选择的选项的弹出窗口，并在关闭后有一个回调，它将返回所选元素）。这些 id 被传递给具有自定义钩子的子组件，该钩子使用这些 id 来执行某些操作。每当我点击链接并选择一个元素并关闭弹出窗口时.. 得到错误

"VM10715 react_devtools_backend.js:2430 您在调用应该保持不变的钩子时更改了参数 [Array(2)] 0: (2) ["", "asdsadsad"] 最后索引：（...）最后一项：（...）长度：1"

有没有办法在不遇到此错误的情况下进行这项工作？请参阅下面的代码示例

const TestComp = () => {
  const [newIds, setNewIds] = useState([]);

  const onPopupElementSelect = (ids) => {
    setNewIds([...newIds, ids]);
  };

  return (
    //renders some components
    <>
      <ImageComponent images={images} ids={newIds} onClick={handleClick} />

      <Popup onSelect={onPopupElementSelect} />
    </>
  );
};

const ImageComponent = (props) => {
  const { newIds, images } = props;
  const newImages = useImages(ids || ['']); //customhook that fetches image details by ids

  const imgs = images.map((i) => (
    <div key={i.imageId}>
      <img src={i.imageUrl} alt="" />
      <Link onClick={handleClick} /> //opens the popup for user to select a new
      image
    </div>
  ));

  return <div>{imgs}</div>;
};

ps：参数名称不是问题.. 这段代码只是一个示例，用于给出我正在尝试做的事情的基本概念。

Answer 1

我想是因为你给了 parameter 同名，状态可能是 try newID 作为参数名

const onPopupElementSelect = (newId) => {
    setIds(oldIds => [...oldIds, newId]);
};

使用状态变量作为参数来响应自定义钩子

1 个答案: