Question

我是新来的反应者，喜欢钩子，如果state.items.length大于3，但我尝试在以下代码中设置禁用状态，但我的状态对象中未获取更新的值。因此，我尝试在useEffect挂钩中设置禁用状态，以获取状态的最新值。但是，如果在useEffect中设置了setDisabled状态，则会陷入无限循环。

有人可以告诉我代码有什么问题吗？

//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])

Answer 1

您应该首先声明一个新变量来保持并跟踪禁用状态。（使用另一个useState）接下来，您应该使用useEffect不断检查当前状态下项目的长度。我已经从上述codesandbox中获取了代码作为参考。

// 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 的值。

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

React js设置状态未在状态对象中获取更新值

1 个答案: