React：无法通过将函数传递给更新它的子组件来更新父状态答案

【问题标题】：React: unable to update parent state by passing function to child component that updates itReact：无法通过将函数传递给更新它的子组件来更新父状态
【发布时间】：2019-08-13 02:43:40
【问题描述】：

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

我可以 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 } 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;

我想避免使用 Redux，因为这是一个小型应用程序。

我应该如何从 saveFormData 函数更新父元素的状态？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

试试这个：

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>
    );
  }

}

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>
        );
    }
}

可以在https://stackblitz.com/edit/react-parent-child-1找到工作版本

【讨论】：

【解决方案2】：

setState 是异步的，所以如果你想验证它是否正常工作，你可以在它的回调函数中这样做：

saveFormData = (data) => {

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

【讨论】：

感谢您的建议。控制台日志时，我仍然看不到有关状态的数据。
如果data 是在saveFormData 中定义的，您可以通过记录this.state.formData 在回调的状态中看到它。

【解决方案3】：

可以在this.setState函数中使用之前的状态参数来简化。

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

【讨论】：