将类转换为钩子数组

Question

我正在尝试将类转换为钩子，我的问题是这部分 '[event.target.id]: event.target.value,'，如何转换它？

我的代码：

 this.setState({
      helperText: {
        ...this.state.helperText,
        [event.target.id]: helperText,
      },
      error: {
        ...this.state.error,
        [event.target.id]: error,
      },
      [event.target.id]: event.target.value,
    });

我做了什么：

setHelperText({
    ...helperText,
    [event.target.id]: helperText,
  })
setError({
    ...error,
    [event.target.id]: error,
  })

如何转换最后一部分？

Answer 1

您可以将记录或地图放入useState

const [values, setValues] = useState({});

setValues(prevValues => ({ ...prevValues, [event.target.id]: event.target.value }));

或

const [values, setValues] = useState(new Map());

setValue(prevValues => new Map(prevValues).set(event.target.id, event.target.value))

此外，您可能希望切换结构以一次更新所有内容：

const [state, setState] = useState({});

setState(prevState => {
  const value = {
    value: event.target.value,
    helperText,
    error,
  };

  return { ...prevState, [event.target.id]: value };
});

注意！如果您的下一个值取决于前一个值，您应该使用 setState 的函数版本。 https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous