Вы не можете напрямую вызвать setState
для родительского компонента из дочернего компонента, поскольку обновление состояния компонента ограничено текущим компонентом.
Чтобы справиться с этим, просто передайте функцию от родителя потомку, которая содержит setState
. Поэтому, когда вы хотите обновить состояние родителя, просто вызовите эту переданную функцию.
Минимальный пример:
// Parent.jsx
import React, { Component } from 'react';
import Child from './Child';
class Parent extends Component {
constructor(props) {
super(props);
this.setChanged = this.setChanged.bind(this);
this.state = {
changed: false
}
}
// Function to set the parent's state
setChanged() {
this.setState({ changed: true });
}
render() {
return <Child setChanged={this.setChanged} />
}
}
// Child.js
import React from 'react';
function Child(props) {
return (
// When clicked, parent's setChanged function is called
<div onClick={() => props.setChanged()} />
)
}