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

Question

I need to save form submission data to parents state from form component.

I can console.log the data from my save function on parent component but I can't seem to be able to change the state.

Here is my attemp:

Parent Component:

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;

Child Component:

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;

I would like to avoid using Redux since this is a small application.

How should I update the state of parent element from saveFormData function?

Answer 1

Try this:

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

A working version can be found at https://stackblitz.com/edit/react-parent-child-1

Answer 2

setState is async, so if you want to verify that it worked correctly, you can do so in its calllback function:

saveFormData = (data) => {

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

Answer 3

It can be simplified by using previous state parameter in this.setState function.

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