基于子组件更新 App 状态

Question

我需要在更新 Child 组件的状态时更新父组件的状态 (App.js) GET 在 componentDidMount().

中请求

我试图将函数 setPoints 作为 prop 传递，但不幸的是这不起作用。

这是我的尝试：

Child 分量：

class Child extends Component {

    state = {
        points: null
    }

    async componentDidMount() {
        try {
            const res = await axios.get(url);
            const data = res.data;
            this.setState({
                points: data.points,
            })
            this.props.setPoints();
        } catch (err) {
            console.log('child', err);
        }
    }

    render() {
        return (
            <div>
            </div>
        );
    }
}

父组件（App）：

class App extends Component {

    state = {
        points: '',
    }

    setPoints() {
        this.setState({
            ...this.state,
            points: this.state.points
        });
    }

    shouldComponentUpdate(nextState) {
        if (this.state.points !== nextState.points) {
            return true;
        }
        return false;
    }

    render() {
        return (
            <div className="App">
                <Route exact path="/child" render={() => <Child setPoints={this.setPoints} />} />
            </div>
        );
    }
}

谁能帮我解决这个问题？将不胜感激。

编辑

我试过 Joe Clay 写的，这很合理，但我仍然遇到错误。这是我更新的代码：

    async componentDidMount() {
    try {
        const res = await axios.get(url);
        const data = res.data;
        console.log(data.points);
        this.props.setPoints(data.points);
    } catch (err) {
        console.log('child', err);
    }

它确实记录了点数，但出于某种原因我得到："Cannot read property 'points' of undefined"。

Answer 1

在 child 上：

this.props.setPoints(data.points)

在 parent 上：

setPoints(points) {
    this.setState({
        ...this.state,
        points
    });
}

Answer 2

考虑父级中的数据值 Component.I 将通过将 prop 传递给在父级中执行 setState 的函数来更改数据值，从而将值更改为所需的值。

父组件

class Parent extends React.Component{    
    constructor(props){
         super(props);
         this.state({
             name:''
         })
    }    

     handleChange(value){
         this.setState({name:value});
     }
     render(){
         return (<Child handleChange={this.handleChange} />)
     }
}

将 handleChange 函数作为 prop 传递给子组件。

子组件

export default class Child extends React.Component{
     sendData(false){
        this.props.handleChange(hello)   //make sure to pass the value in the 
          argument that you wish to do a setState on in the parent component
     }   
}

这会在父组件中将 name 的值设置为 hello。

基于子组件更新 App 状态

Update App state based on Child component

parent-child

async-await

reactjs

react-props