Javascript 反应：无法通过将函数传递给更新父状态的子组件来更新父状态

我需要将表单提交数据从表单组件保存到父状态

我可以在父组件上从我的save函数将数据记录到console.log中，但我似乎无法更改状态

这是我的想法：

父组件：

import React, { Component } from "react";
import InputFormView from "./views/InputFormView";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      formData: '',
    };
  }

  saveFormData = ( data ) => {

    let newState = Object.assign({}, this.state);
      newState.formData = data
      console.log("formData: ")
      console.log(newState) // I can see correct data here
    this.setState(newState)

    // this.setState({ formData : data }) // this also doesn't seem to update the state

    setTimeout(() => {
      console.log(this.state); // formData is empty
    }, 3000);
  };

  render() {
    return (
      <div className="App">
        <div className="container">
          <InputFormView saveFormData={this.saveFormData} />
        </div>
      </div>
    );
  }
}

export default App;

import React，{Component}来自“React”；
从“/views/InputFormView”导入InputFormView；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
formData:“”，
};
}
saveFormData=（数据）=>{
让newState=Object.assign（{}，this.state）；
newState.formData=数据
console.log（“formData:”）
console.log（newState）//我可以在这里看到正确的数据
this.setState（newState）
//this.setState（{formData:data}）//这似乎也不会更新状态
设置超时（（）=>{
console.log（this.state）；//formData为空
}, 3000);
};
render（）{
返回(
);
}
}
导出默认应用程序；

子组件：

import React, { Component } from 'react';

class InputFormView extends Component {

    saveData = e => {
        e.preventDefault();
        ...
        this.props.saveFormData(JSON.stringify(values));
    }


    render() {

        return (
            <React.Fragment>
                ...
                <button onClick={this.saveData}>Save</button>
            </React.Fragment>
        );
    }
}

export default InputFormView;

import React，{Component}来自'React'；
类InputFormView扩展组件{
saveData=e=>{
e、 预防默认值（）；
...
this.props.saveFormData（JSON.stringify（values））；
}
render（）{
返回(
...
拯救
);
}
}
导出默认InputFormView；

我希望避免使用Redux，因为这是一个小应用程序

---

如何从saveFormData函数更新父元素的状态

setState

是异步的，因此如果您想验证它是否正常工作，可以在其callback函数中执行此操作：

saveFormData = (data) => {

  this.setState({
    formData: data
  }, () => {
    console.log(this.state)
  });
};

---

可以通过在

此.setState

函数中使用先前的状态参数来简化

  saveFormData = ( data ) => {
    this.setState((prevState) => { ...prevState, formData: data});
  };

试试这个：

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      formData: '',
    };
  }

  saveFormData = data => 
    this.setState(state => ({...state, formData: data}), ()=> console.log(this.state));

  render() {
    return (
      <div className="App">
        <div className="container">
          <InputFormView saveFormData={this.saveFormData} />
        </div>
      </div>
    );
  }

}

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
formData:“”，
};
}
saveFormData=data=>
this.setState（state=>（{…state，formData:data}），（）=>console.log（this.state））；
render（）{
返回(
);
}
}

类InputFormView扩展组件{
建造师（道具）{
超级（道具）；
此.state={
myValue:'你好'
};
}
saveData=e=>{
e、 预防默认值（）；
this.props.saveFormData（this.state）；
}
handleChange=e=>this.setState（{myValue:e.target.value}）；
render（）{
const{myValue}=this.state；
返回(
拯救
);
}
}

---

可以在

上找到工作版本，谢谢您的建议。我在控制台记录日志时仍然看不到状态数据。如果

数据

是在

saveFormData

中定义的，您可以通过记录

this.state.formData

在回调中的状态中看到它。

class InputFormView extends Component {

    constructor(props) {
      super(props);
      this.state = {
        myValue: 'hello'
      };
    }

    saveData = e => {
        e.preventDefault();
        this.props.saveFormData(this.state);
    }

    handleChange = e => this.setState({myValue: e.target.value});

    render() {
      const {myValue} = this.state;
        return (
            <React.Fragment>
                <input value={myValue} onChange={this.handleChange} />
                <button onClick={this.saveData}>Save</button>
            </React.Fragment>
        );
    }
}