React js设置状态没有在状态对象中获得更新的值答案

【问题标题】：React js set State not getting Updated values in state objectReact js设置状态没有在状态对象中获得更新的值
【发布时间】：2020-05-10 05:11:30
【问题描述】：

我是新来的反应和钩子，我试图在下面的代码中设置禁用状态，如果 state.items.length 大于 3 但我没有在我的状态对象中获得更新的值。所以我尝试在 useEffect 钩子中设置禁用状态，我可以在其中获取状态的最新值。但是如果我在 useEffect 中设置禁用状态，它就会进入无限循环。

谁能告诉我代码有什么问题？

//This is how my state object and input fields looks.
 const [state, setState] = useState({
    items: [],
    value: "",
    error: null
  });

  <input
        className={"input " + (state.error && " has-error")}
        value={state.value}
        placeholder="Type or paste email addresses and press `Enter`..."
        onKeyDown={handleKeyDown}
        onChange={handleChange}
        onPaste={handlePaste}
      />


 const handleKeyDown = evt => {
    if (["Enter", "Tab", ","].includes(evt.key)) {
      evt.preventDefault();

      var value = state.value.trim();

      if (value && isValid(value)) {
        setState(prev => ({
          ...prev,
          items: [...prev.items, prev.value],
          value: ""
        }));
      }
      //if my items array which is a count of emails i.e arrays of strings is greater than 3 I want to disable the input field.
       if(state.items.length > 3){
        setDisabled(true);
      }
    }
  };

  useEffect(()=>{
    // if I set the disabled state which is an object inside the state param it goes into an infinite loop.
    passStateToParent(state);
  }[state])

【问题讨论】：

有batching 的概念，如果你在同一个函数中更新多个状态，每件事都会被批处理并执行。添加新值时，您可以复制当前状态，然后将新项目添加到复制的数组中，然后从复制的数组中检查长度，而不是从状态
感谢您的回复。您能否提供一个如何完成的示例代码？因为我是新来的反应。
需要更清楚代码，useState 项目如何存储在状态中。您如何获得需要添加的新价值
我指的是codesandbox.io/s/frosty-cloud-h270z?file=/src/App.js 示例，在该示例中，我想添加一个功能，即输入框应仅接受 3 个电子邮件 ID，并且不能超过。我已将状态对象与输入字段一起添加。

标签： reactjs react-native react-redux react-hooks

【解决方案1】：

您应该首先声明一个新变量来保存和跟踪禁用状态。（使用另一个 useState）然后接下来您应该使用 useEffect 不断检查当前状态下项目的长度。我从上面提到的codeandbox中获取了代码作为参考。

// use this useState hook to keep track disabled state.
const [inputDisable, setInputDisabled] = useState(false);

//use effect to check, if state item length
useEffect(() => {
  const items = [...state.items];
  if (items.length === 3) {
    setInputDisabled(true);
  }
}, [state]);

然后在您的输入标签中添加一个名为 disable 的新属性，并将 inputDisable 的值分配给它。

请参阅此代码框链接以查看实时示例。 https://codesandbox.io/s/vigorous-stallman-vck52?file=/src/App.js:490-523

【讨论】：

非常感谢这对我有用。我赞成你的回答。
不客气，你应该阅读官方文档以了解反应钩子，它们是最好的解决反应钩子及其实现方面的任何混淆。