Question

我正在将我的Class组件之一转换为功能组件，但是，我正在考虑从功能版本处理状态的更好方法。

当前，这是我的Class组件状态：

this.state = {
      email: "",
      password: "",
      errors: {},
    };

在功能组件版本上，当前我必须使用UseState将这些状态分为三个不同的状态：

const [email, setEmail] = useState("");
const [password, setpassword] = useState("");
const [errors, setErrors] = useState({});

有没有一种方法可以将这些状态组合成默认为对象的1种状态，如下所示：

const [states,setStates] = useState({
    email:"",
    password:"",
    errors:{}
});

原因是为什么，因为我从类组件中获得了此类代码，并且如果我选择第一个Functional comp，我认为这不会起作用。设置：

  handleChange = (event) => {
    this.setState({
      [event.target.name]: event.target.value,
    });
  };

Answer 1

是的，您可以这样做。但是您必须像这样修改setState函数


     handleChange = (event) => {
        setStates({ ...states , [event.target.name]: event.target.value})
     };

无论您在哪里，都必须在每个setState调用中执行此操作。

Answer 2

是的，您可以使用自定义钩子来实现：

const useLegacyState = initialState => {
  return useReducer((prevState, newState) => {
    return typeof newState === 'function'
    ? { ...prevState, ...newState(prevState) }
    : { ...prevState, ...newState };
  }, initialState);
};

和用法：

const [states, setStates] = useLegacyState({
  email: '',
  password: '',
  errors: {}
});

const handleChange = event => {
  setStates({
    [event.target.name]: event.target.value
  });
};

Answer 3

是的，状态变量的结构完全取决于您。

但是请注意，这意味着每次调用setStates时，都需要提供整个结构。

您可以使用Object.assign之类的方法来“更新”现有状态，如下所示：

setStates(Object.assign({}, states, {a: 'b'}));

这会将具有a值的b键添加到状态，而不会更改先前的键。

将类反应为功能组件

3 个答案: