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

我一直遇到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 setvalue(e.target.value)} OnBlur={saveValue} />;
};


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

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

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

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

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

const TestCompOnent= props = {
const [value,setValue] = useState(props.initialValue);
const saveValue = () => {
props.save(value);
}
return setValue(e.target.value)} OnBlur={saveValue} />;
}


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

const ParentCompOnent= props = {
// some code...
return
}


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