React useEffect警告以放置缺少的依赖项。但是钩子中的依赖项值会发生变化

Question

我想在步骤的值更改时更改formStepTouched的值，因此我使用useEffect。但useEffect发出警告，它缺少对FormStepTouch的依赖性。由于这是正在更改的值，因此将其放入依赖项数组将导致无限调用。

 const [step, setStep] = useState(0);
 const [formStepTouched, setFormStepTouched] = useState(
    Array(childrenArray.length)
      .fill(false)
      .map((_, idx) => idx === 0)
 )

 useEffect(() => {
    const newFormStepTouched = [...formStepTouched];
    newFormStepTouched[step] = true;
    setFormStepTouched(newFormStepTouched);
  }, [step]);

请参阅下面的codesandbox链接：https://codesandbox.io/s/brave-gould-ymjt0?file=/src/App.js

正如您所看到的，演示工作非常完美，但是显示了一条错误消息。如果添加依赖项，则将无限调用useEffect。

如何消除错误消息。

Answer 1

   useEffect(() => {
    setFormStepTouched(prevState =>  {
      const newFormStepTouched = [...prevState]
      newFormStepTouched[step] = true
      return newFormStepTouched
    });
  }, [step]);

短毛是告诉你，有一个外部依赖，可能会改变，你可以在这里阅读更多

Answer 2

您可以将回调传递给状态设置器：

const { useEffect, useState } = React;

const App = () => {
  const [step, setStep] = useState(0);
  const [formStepTouched, setFormStepTouched] = useState(
    Array(5)
      .fill(false)
      .map((_, idx) => idx === 0)
  );

  useEffect(() => {
    //pass a callback to state setter
    setFormStepTouched((formStepTouched) => {
      if (formStepTouched[step] === true) {
        //nothing to change
        return formStepTouched;
      }
      return formStepTouched.map((s, i) =>
        i === step ? true : s
      );
    });
  }, [step]);

  return (
    <div>
      <button onClick={() => setStep(step + 1)}>
        nex step
      </button>
      <div>
        <pre>
          {JSON.stringify(formStepTouched, undefined, 2)}
        </pre>
      </div>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>