Обновить состояние родительского компонента из дочернего компонента в React js
Я устанавливаю состояние дочернего компонента при выполнении события и хочу отправить его в родительский компонент. Я искал это на SO. Но до сих пор не нашел способа сделать это.
Допустим, у меня есть компонент родительДомой и компонент ребенокПользователь. Я выполняю какое-то событие в компоненте Пользователь, и в это время я хочу передать данные в компонент Домой. Как я могу это сделать?
Ниже мой код:
/* Parent component */
import React, { Component } from 'react';
import User from './user';
class Home extends React.Component{
constructor(props){
super(props)
this.state = {
isReportSent: false
}
}
render(){
<Switch>
<Route exact path = "/" component = {User}/>
</Switch>
}
}
/* child component */
class User extends React.Component{
constructor(props){
super(props)
}
render(){
}
}
Примечание: Мой родительский компонент - это компонент маршрутизации, в котором я маршрутизирую свой дочерний компонент по определенному пути. Таким образом, нельзя передать какую-либо функцию дочернему компоненту.
Нет, не могу. Скажите, пожалуйста, если знаете.
Это случай reactjs.org/docs/lifting-state-up.html
Пожалуйста, вставьте код вашего дочернего и родительского компонентов, чтобы я мог вам помочь.
Почему бы вам не передать функцию обратного вызова как дополнительную опору от родителя к дочернему и не вызвать этот обратный вызов из дочернего компонента
Ответы 5
Что-то вроде этого могло бы сработать. Я не уверен, работает ли нижеприведенное на 100%, поскольку я просто быстро написал его, но идея состоит в том, чтобы передать setState() в качестве опоры от родителя к ребенку. Поэтому, когда дочерний элемент вызывает setState из реквизита, он устанавливает состояние в родительском компоненте.
class Home extends React.Component {
constructor (props) {
super(props)
this.state = {
data: []
}
}
render () {
<ChilComponent setState = {this.setState} />
}
}
const User = async ({ setState }) => {
const receivedData = await getDataHowever(params)
setState({
data: receivedData
})
return (
<p>Got data!</p>
)
}
Да, это самый простой способ - передать функцию дочернему компоненту в качестве свойств, задающих состояние. Единственный другой способ - задействовать redux или какое-то управление состоянием. Это должен быть принятый ответ.
import React, { Component } from "react";
class Home extends Component {
constructor(props) {
super(props);
this.state = {};
}
onChildAPICall = result => {
console.info(result);
};
render() {
return <User onAPICall = {this.onChildAPICall} />;
}
}
class User extends Component {
constructor(props) {
super(props);
this.state = {};
this.API = "https://apicall";
}
makeAnAPICall = async () => {
let result = await fetch(this.API);
this.props.onAPICall(result);
};
render() {
return <button onClick = {this.makeAnAPICall}>API Call</button>;
}
}
export default Home;
Вы можете вызвать функцию обратного вызова родителя из дочернего компонента, а в родительском элементе вы можете установить состояние на основе ответа обратного вызова.
import React, { Component } from "react";
class Home extends Component {
constructor(props) {
super(props);
this.state = { }
}
setStateOfParent= result => {
this.setState({result : result});
}
render() {
return <User setStateOfParent = {this.setStateOfParent} />;
}
}
class User extends Component {
constructor(props) {
super(props);
this.state = {};
this.API = "https://apicall";
}
makeAnAPICall = async () => {
let result = await fetch(this.API);
this.props.setStateOfParent(result);
};
render() {
return <button onClick = {this.makeAnAPICall}>API Call</button>;
}
}
export default Home;
Мой родительский компонент находится там, где я выполняю маршрутизацию, поэтому вы вызываете дочерний компонент внутри родительского, например: <Дочерний компонент>. Я этого не делаю. Есть ли у вас другой вариант?
В вашем объяснении не совсем ясно, чего вы хотите достичь, но в качестве простого шаблона вы можете передать опору обратного вызова дочернему компоненту, используя метод рендеринга реагирующего маршрутизатора.
Родительский компонент
<Route exact path = "/" render = {(props) => <User {...props} callback = {this.callback} />}/>
Детский класс
this.props.callback(data)
@ user10742206 Лучший способ - создать независимый компонент и включить его в качестве дочернего в любой родительский компонент. Затем вы можете передать функцию обратного вызова от родителя, и потомок может использовать ее для отправки любых данных родителю.
Почему бы вам не вызвать API в самом родителе?