更新 JSON 状态对象问题

Question

我在更新 JSON 状态对象时遇到困难。 我的应用程序背后的基本前提是我有一个嵌入了子组件的父组件。 根据某些用户交互，子组件将以编辑模式加载，允许用户更改表单中的字段(否则为只读(。

基于子组件表单中的更改，更改成功地传递回函数的父组件(onOverviewChange(。 字段名称和字段值似乎被正确传回，但是我似乎无法使用新值更新状态。

关于如何解决这个问题的任何想法？

父组件

export default class Patient extends React.Component {
constructor(props) {
super(props);
autoBind(this);
...
this.onOverviewChange = this.onOverviewChange.bind(this);
}
onOverviewChange(event) {
const fieldName = event.target.name;
const fieldValue = event.target.value;
const fieldID = event.target.id;
/* Approach # 1: This way updates states but doesn't allow me to change the text box*/
this.setState((prevState) => {
let patient = [...prevState.PATIENT];
patient[0] = {...patient[0], [fieldName]: fieldValue};
console.log("JSON:" + JSON.stringify(patient[0]));
return({patient});
});
/* Approach # 2:  this way updates the text box but not the state
let patient = [...this.state.PATIENT];
console.log("Target Name:" + fieldName +". Value:" + fieldValue + " ID: " + fieldID + ". JSON:" + JSON.stringify(patient));
patient[0] = {...patient[0], [fieldName]: fieldValue};
this.setState({PATIENT: patient}); */
}
render() {
...
<OverviewWrapper onchange={this.onOverviewChange} overview={this.state.PATIENT} ovtype={this.state.COMPPROPS} />
...
}

概述包装器组件确定面板将显示为只读还是可编辑...

export default class OverviewWrapper extends React.Component {
constructor(props) {
super(props);
autoBind(this);
}
render() {
const overview = this.props.overview;
const type = this.props.compState;
let OverviewWrapper = null
switch (type) {
case "Edit" : 
OverviewWrapper = OverviewEditPane
break
default: 
OverviewWrapper = OverviewPane
break
}
return <OverviewWrapper {...this.props}  />
}
}

然后我有我的可编辑子组件，用户可以在其中更改值

export default class OverviewEditPane extends React.Component {  
constructor(props) {
super(props);
autoBind(this);
}
render () {
return (
<table>
<FormFields>
<tr>
<td>{this.props.overview.map((P) => {return <TextInput size='small'  key={P.id} id={P.id} value={P.FName} onChange={P.onOverviewChange}  />;})}</td>
**<!--OTHER FIELDS LISTED HERE --->**
</tr>

患者数据 JSON

"PATIENT": [{
"id": 6,
"FName": "Chris",
"LName": "Baker",
"Height": "62",
"Weight": 320,
"DOB": "1988-09-18T00:00:00",
"Active": true
}]

Answer 1

请记住，React 状态更改不是同步的;当您依靠旧状态值修改状态时，您必须切换到功能setState签名。见 https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

所以：

onOverviewChange(event) {
const fieldName = event.target.name;
const fieldValue = event.target.value;
const fieldID = event.target.id;
this.setState((oldState) => {
let patient = [...oldState.PATIENT];
console.log("Target Name:" + fieldName +". Value:" + fieldValue + " ID: " + fieldID + ". JSON:" + JSON.stringify(patient));
patient[0] = {...patient[0], [fieldName]: fieldValue};
return({ patient });
});
}

Answer 2

JavaScript 是一种区分大小写的语言。这意味着语言 关键字、变量、函数名称和任何其他标识符必须 始终使用一致的字母大写进行键入

执行此操作时，您需要保持状态属性名称的一致性：

this.setState({patient});

您的状态变为 ：

{
PATIENT: [{"id": 6, ......}],
patient: [{"id": 6, ......, updatedField: value}]
}

我建议您使用非大写名称("患者"(初始化您的状态，并仅使用此名称。

constructor(props) {
super(props);
this.state = {
patient: PATIENT
}
}