时间戳

首页 > 解决方案 > 更新 JSON 状态对象问题

reactjs - 更新 JSON 状态对象问题

问题描述

我在更新我的 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} />
...
}

概述 Wrapper 组件确定面板是否显示为只读或可编辑...

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

标签： reactjs

解决方案

请记住，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 });
    });
}

推荐阅读