在更新和不更新道具时重新渲染组件一次 - REACT HOOKS

Question

是否可以强制重新渲染组件一次，无论是否更改 props..

const SearchGenresResult = ({ Id }) => .....

 useEffect(() => {
    callUrl(url);
    setTheNewInputValue(Id);

  }, [Id]);

解释：

1. 5 张 Id 为 1、2、3、4 和 5 的图像
2. 点击任何图片时，id 作为道具传递。
3. 收到 ID 后，该图像的详细信息会显示在模态框上。
4. 除了单击同一张图片两次外，一切正常。
5. 虽然 id 作为道具传递，但 useEffect 不是 由于先前和当前道具的值保持不变而触发。因此 模态不显示。

如何解决这个问题.. 尝试使用 const forceUpdate = useState()[1] 但没有运气..

Answer 1

除了将 id 作为字符串传递之外，您还可以传递一个以 id 作为键的对象并将其添加为对 useEffect 依赖项的引用。

在这种情况下，每当您在 parent 中为 id 设置状态时，都会创建对象的新引用，因此 useEffect 检查会中断，导致它再次运行

const SearchGenresResult = ({ stateId }) => .....

 useEffect(() => {
    callUrl(url);
    setTheNewInputValue(stateId.Id);

  }, [stateId]);
  ...

}

在父母中

...

const [stateId, setStateId] = useState({});

..
function fn(someId) {
   setStateId({id: someId});
}

...

<SearchGenresResult stateId={stateId} />

但是，如果您将 sameId 传递给孩子，则实际上不需要重新渲染