Как передать данные от дочернего компонента (у ребенка есть собственное состояние) к родителю?

Question

Ожидаемый эффект: нажмите кнопку -> вызвать функцию setEditing () -> вызвать элемент функции () внутри setEditing () -> this.state.isEditing изменится на true -> в родительском this.state.isEdit изменится на true.Когда я вызываю функцию item (), значение isEditing не меняется

App

class App extends React.Component {
  constructor() {
    super();

    this.state = {
        isEdit = false; 
    };
  }

  handleSomething = (value) => {
    this.setState(prevState => {
      return {
        isEdit: value
      };
    });
  }


  render() {
    return (
      <div>
        <ul>
          {
            this.state.todos
              .map((todo, index) =>
                <Todo
                  key={index}
                  index={index}
                  todo={todo}
                  handleSomething={this.handleSomething}
                />
              )
          }
        </ul>
      </div>
    );
  }
}

Todo

class Todo extends Component {

  state = {
    isEditing: false
  }

  setEditing = () => {
    this.setState({
      isEditing: !this.state.isEditing
    })

    this.item();
  }

  item = () => { 
    const { isEditing} = this.state;
    this.props.handleSomething(isEditing);
  }

  render() {
    return ( 
        <button onClick={() => this.setEditing()}>Edit</button>

    )
  }
}

Answer 1

Вам нужно будет позвонить this.item после изменения состояния, что-то вроде

setEditing = () => {
  this.setState({
    isEditing: !this.state.isEditing
  }, this.item)
}

Кроме того, если вы хотите получить новое состояние из старого, вам придется использоватькак то так:

setEditing = () => {
  this.setState(prevState => ({
    isEditing: !prevState.isEditing
  }), this.item)
}

Answer 2

Попробуйте основать свое изменение состояния на предыдущем состоянии и вызовите родительскую функцию в обратном вызове:

setEditing = () => {
  this.setState(prevState => ({
    isEditing: !prevState.isEditing
  }), this.item)
}

Потому что, как написано в документе React:

setState ()не всегда сразу обновляет компонент.Это может пакетировать или отложить обновление до позже.Это делает чтение this.state сразу после вызова setState () потенциальной ловушкой.Вместо этого используйте componentDidUpdate или обратный вызов setState (setState (Updater, callback)), который гарантированно сработает после применения обновления.Если вам нужно установить состояние на основе предыдущего состояния, прочтите об аргументе средства обновления ниже.(https://reactjs.org/docs/react-component.html#setstate)

Answer 3

class Todo extends React.Component {

  state = {
    isEditing: false
  }

  setEditing = () => {
    this.setState({
      isEditing: !this.state.isEditing
    },this.item())
  }

  item = () => { 
    const { isEditing} = this.state;
    this.props.handleSomething(isEditing);
  }

  render() {
    return ( 
        <button onClick={() => this.setEditing()}>
          Edit
         </button>
    )
  }
}

class App extends React.Component {
  constructor() {
    super();

    this.state = {
        isEdit : false,
        todos : [
          "test 1",
          "test 2"
        ]
    };
  }

  handleSomething = (value) => {
    this.setState(prevState => {
      return {
        isEdit: value
      };
    });
  }


  render() {
    return (
      <div>
        <ul>
          {
            this.state.todos
              .map((todo, index) =>
                <Todo
                  key={index}
                  index={index}
                  todo={todo}
                  handleSomething={this.handleSomething}
                />
              )
          }
        </ul>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>