Question

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

基于子组件形式的更改，更改已成功地传递回给函数（onOverviewChange）的父级。 fieldName和fieldValue似乎已正确传递回去，但是我似乎无法用新值更新状态。

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

父组件

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

请记住，反应状态更改不是同步的；当您依靠旧状态值修改状态时，必须切换到功能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
  }
}

更新JSON状态对象问题

2 个答案: