使用 setState 分配值时出现问题

Question

刚开始使用 React，并且在尝试更改文本字段以更新状态时遇到一些麻烦。使用使用 useState 设置初始状态的功能组件。

我确定我只是错过了一些简单的东西...但最终放弃并寻求帮助。

以下是功能组件的完整代码：

import React, { useState } from 'react';
import Step1 from '../Element/FormStep1';
const NewForm = () => {
let [object, setObject] = useState({
property: {
entry: 'string'
}
});
function handleChange(event) {
const {name, value} = event.target;
setObject({
...object,
[name]: value
})
console.log(object)
};
return (      
<form>     
<Step1 
handleChange={handleChange}
object={object}
/>                        
</form>
);
}
export default NewForm

对于表单组件：

import React from 'react';
import TextField from '@material-ui/core/TextField';
import t from 'typy'
export default function Step1(props) {
return(
<React.Fragment>
<TextField
name={t(props.object, 'property.entry').safeObject}
type='text'
onChange={props.handleChange}
/>
</React.Fragment>
);
}

当handleChange函数运行时，它不是替换目标属性，而是创建一个以原始值作为名称的新属性，即

object {
property: {
entry: 'string'
},
string: value //Text input
}

目的是将值"字符串"替换为文本输入。

object {
property: {
entry: 'value' //Text input 
}
}

Answer 1

如果你想有一个具有 value 属性的对象，你应该添加{}.

你应该改变

setObject({
...object,
[name]: value
})

自

setObject({
...object,
[name]: { value } // added { }
})

Answer 2

因此，经过一段时间的睡眠和更多的在线研究，我设法弄清楚了这一点。使用 lodash 中的 set 方法是要走的路。因此，需要对我的文本字段上的 name 属性进行微小更改：

<TextField
name='property.value'
type='text'
onChange={props.handleChange}
/>

在我的函数组件文件中导入 set 后，import { set } from 'lodash';我可以按如下方式修改句柄更改函数：

function handleChange(event) {
const {name, value} = event.target;
set(object, name, value)
console.log(object) // to see that it worked in the console. 
}

现在，这正在按预期工作(几个小时后感到沮丧(

注意。。。这是我实际找到答案的地方：

https://levelup.gitconnected.com/handling-complex-form-state-using-react-hooks-76ee7bc937

Answer 3

您的对象将在下一次渲染中更改。

function handleChange(event) {
const {name, value} = event.target;
const newObject = {
...object,
[name]: value
} 
setObject(newObject)
console.log('newObject', newObject)
console.log('currentObject', object)
};

新对象 ！= 对象