在這個例子中如何正確使用useState？

Question

我有以下代碼：

const [data, setData] = useState({
        name: '',
        surname: '',
        email: '',
        password: ''   
    });

但是，我需要有類似的東西：

 const [name, setName] = useState('');
 const [surname, setSurname] = useState('');
 const [email, setEmail] = useState('');
 const [password, setPassword] = useState('');

但仍然保持setData()函數，因為它使用。

Answer 1

您可以添加一個接受所有參數的函數，並使用您定義的useState方法。

這樣您就可以自定義和檢查參數的值。

所以它將如下所示：

function Example() {
    const [name, setName] = useState('');
    const [surname, setSurname] = useState('');
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    function changeData({name, surname, email, password}){
        // call your setSates here
        setName(name)
        setName(surname)
        setName(email)
        setName(password)
    }

}

請注意，如果要檢查要傳遞的參數，則必須檢查它們是否undefined 。 如果不檢查它是否將變量設置為undefined

Answer 2

您可以使用setData更新單個屬性。

const [data, setData] = useState({
    name: '',
    surname: '',
    email: '',
    password: ''   
});

const setValue = (fieldName, value) => setData({...data, [fieldName]: value});

// to update name
setValue("name", "bob");

Answer 3

如果我理解正確，您正在尋找的解決方案如下：

function MyComponent(props) {
  const [data, setData] = React.useState({
    name: '',
    surname: ''
  })

  // will use `useEffect` as an example with an API call
  React.useEffect(() => {
    SomeAPICall()
      .then((data) => {
        setData({ 
          ...data, 
          name: data.name
        })
      })
  })
}

調用setState ，需要復制當前狀態並更新所需的屬性/屬性。

---

或者，您可以使用React.useReducer來完成同樣的事情：

function MyComponent(props) {
  const [state, setState] = React.useReducer((p, n) => ({ ...p, ...n }), {
    name: '',
    surname: ''
  });

  // will use `useEffect` as an example with an API call
  React.useEffect(() => {
    SomeAPICall().then((data) => {
      setState({ 
        ...state, 
        name: data.name
      })
    })
  })
}

同樣，您需要使用舊狀態並使用新值更新它，然后將其傳遞給setState 。

---

spread syntax將現有對象的屬性復制到新對象上。 如果您不熟悉這種方法，請參考以下內容：

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax