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

在此示例中，如何正确使用useState？

3 个答案: