Javascript 在本例中如何正确使用useState？

我有以下代码：

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（）

函数。

您可以添加一个函数，该函数将接受所有参数并使用定义的

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)
    }

}

---

请注意，如果要检查要传递的参数，必须检查它们是否未定义。如果不检查是否将变量设置为未定义的，则可以添加一个函数，该函数将接受所有参数并使用已定义的

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)
    }

}

---

请注意，如果要检查要传递的参数，必须检查它们是否未定义。如果您没有检查它是否会将变量设置为未定义的

，如果我理解正确，您需要的是如下解决方案：

功能MyComponent（道具）{
const[data，setData]=React.useState({
名称：“”，
姓氏：''
})
//将使用“useEffect”作为API调用的示例
React.useffect（（）=>{
SomeAPICall（）
。然后（（数据）=>{
setData（{
…数据，
名称：data.name
})
})
})
}

调用

setState

时，需要复制当前状态并更新所需的属性

---

或者，您可以使用

React.useReducer

完成相同的任务：

功能MyComponent（道具）{
const[state，setState]=React.useReducer（（p，n）=>（{…p，…n}）{
名称：“”，
姓氏：''
});
//将使用“useEffect”作为API调用的示例
React.useffect（（）=>{
SomeAPICall（）。然后（（数据）=>{
设置状态（{
……国家，
名称：data.name
})
})
})
}

同样，您需要获取旧状态并使用新值更新它，然后将其传递给

setState

---

扩展语法将现有对象的属性复制到新对象上。如果您不熟悉这种方法，这里有一些参考：

---

如果我理解正确，您需要的是以下解决方案：

功能MyComponent（道具）{
const[data，setData]=React.useState({
名称：“”，
姓氏：''
})
//将使用“useEffect”作为API调用的示例
React.useffect（（）=>{
SomeAPICall（）
。然后（（数据）=>{
setData（{
…数据，
名称：data.name
})
})
})
}

调用

setState

时，需要复制当前状态并更新所需的属性

---

或者，您可以使用

React.useReducer

完成相同的任务：

功能MyComponent（道具）{
const[state，setState]=React.useReducer（（p，n）=>（{…p，…n}）{
名称：“”，
姓氏：''
});
//将使用“useEffect”作为API调用的示例
React.useffect（（）=>{
SomeAPICall（）。然后（（数据）=>{
设置状态（{
……国家，
名称：data.name
})
})
})
}

同样，您需要获取旧状态并使用新值更新它，然后将其传递给

setState

---

扩展语法将现有对象的属性复制到新对象上。如果您不熟悉这种方法，这里有一些参考：

---

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

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

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

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

---

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

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

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

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

---

@大卫崔恩，这不是真的。如果您传递一个仅具有name属性的对象，它将覆盖完整数据。@davintroon这不是真的。如果您传递一个具有just name属性的对象，它将覆盖完整数据。谢谢，我是否必须使用

setValue（“name”，“bob”），它是否可以没有“

”？您不能在没有“”的情况下传递名称。如果不带“”传递，它将找到未定义的名称变量。因此它将是

setValue（“booleanscheck”，“true”）？不，我的意思是第一个参数应该是字符串，第二个可以是任何值。如果有更多的字段需要更改，而不仅仅是名称呢？谢谢，我必须使用
setValue（“name”，“bob”），它是否可以没有“
”

？您不能在没有“”的情况下传递名称。如果不带“”传递，它将找到未定义的名称变量。因此它将是

setValue（“booleanscheck”，“true”）？不，我的意思是第一个参数应该是字符串，第二个可以是任何值。如果有更多的字段需要更改，而不仅仅是名称呢？这是钩子的工作方式，所以您总是需要将旧状态与新/下一个状态合并。两个示例的区别是什么？最终结果是相同的，但我只是展示了两种不同的方法，你可以用它们来完成同样的事情
React.useState
可能更容易理解，因此我现在只想继续使用它，如果您需要处理一些更复杂的逻辑，请转到
React.useReducer
。这就是钩子的工作方式，所以你总是需要把旧的状态和新的/下一个状态合并。你的两个例子有什么不同？最终结果是一样的，但我只是展示了两种不同的方法，你可以用它们来完成同样的事情
React.useState
可能更容易理解，因此我现在只想继续使用它，如果您需要处理一些更复杂的逻辑，那么请转到
React.useReducer
。