Question

我一直遇到exhaustive-dep规则抱怨的情况。在下面的简单代码中，我想在props.id值更改时重置该值：

const TestComponent = props => {
  const [value, setValue] = useState(props.value);

  useEffect(() => {
    setValue(props.value);
  }, [props.id]);

  const saveValue = () => {
    props.save(value);
  }

  return <input value={value} onChange={e => setValue(e.target.value)} onBlur={saveValue} />;
};

但是，棉绒规则希望我也将props.value添加到依赖项中。如果这样做，它将有效地破坏组件，因为效果将在每次更改输入时运行，从而重置状态。

是否存在实现此行为的“正确”方法？

Answer 1

编写组件的方式是半受控，半非受控样式，这很难做到。我建议您完全控制或完全不受控制。

“受控”组件是仅对给定道具起作用的组件。它从其属性中获取值并将其转发到输入，而没有任何状态。输入更改时，它将调用onChange属性。当输入模糊时，它将调用onBlur属性。所有业务逻辑都由父组件处理。

另一个选项是不受控制的组件，通常是您拥有的组件。父母会传入一个初始值的道具。我建议将其命名为initialValue，因此很显然这将仅被检查一次。之后，一切都由子组件管理。这意味着您的useEffect完全消失了：

const TestComponent = props = {
  const [value, setValue] = useState(props.initialValue);

  const saveValue = () => {
    props.save(value);
  }

  return <input value={value} onChange={e => setValue(e.target.value)} onBlur={saveValue} />;
}

那您该如何重置呢？用key。父组件可以使用标准的react密钥来告诉react它应该卸载旧组件并安装新组件：

const ParentComponent = props = {
  // some code...
  return <TestComponent key={id} initialValue={"whatever"} />
}

只要id不变，TestComponent就会从传入的initialValue开始做它的事情。当id改变时，TestComponent会卸载并在其位置装载一个新的，它将以initialValue开头已经给出了。

使用方法避免出现深度下降警告的效果

1 个答案: