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