在这个例子中如何正确使用 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

如果我理解正确，您正在寻找的解决方案如下：

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

Answer 3

您可以使用 setData 更新单个属性。

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

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

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