反應 Class 到 Function 組件

Question

我正在將我的 Class 組件之一轉換為功能組件，但是，我正在考慮從功能版本處理 state 的更好方法。

目前，這是我的 Class 組件 state：

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

在功能組件版本上，目前我必須使用 UseState 將這些狀態分成三種不同的狀態：

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

有沒有辦法將這些狀態組合在 1 state 中，默認情況下是 object，如下所示：

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

原因是因為我的 class 組件中有這種代碼，如果我選擇第一個函數式組件，我認為這不會起作用。 設置：

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

Answer 1

是的，你可以這樣做。 但是你必須像這樣修改你的setState Function

     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

是的，state 變量的結構完全由您決定。

但是請注意，這意味着每次調用setStates時都需要提供整個結構。

您可以使用類似Object.assign的東西來“更新”現有的 state，如下所示：

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

這會將具有b值的a鍵添加到 state，而不更改之前的鍵。