Question

我需要提出一个新的api请求以获取给定dataId的数据。此值存在于上下文中。

import { MyContext } from './Context'

class MyComponent extends Component {

    constructor(props) {
        super(props)

        this.state = {
            dataId: this.context.state.dataId // tried setting state first but didn´t work.
        }

        this.details = this.details.bind(this)
    }

    details() {

        fetch('https://api.mydomain.com/' + this.context.state.dataId)
            .then(response => response.json())
            .then(data => this.setState({ data: data }));
    }

    componentDidMount() {
        this.details()
    }

    render() {

        return(

        <MyContext.Consumer>
            {(context) => (
                <div>data: {JSON.stringify(data)} dataId: {context.state.dataId}</div>

            )}
        </MyContext.Consumer>

        )
    }
}

MyComponent.contextType = MyContext;
export default MyComponent

从其他组件中，我可以设置新值，例如

this.context.setDataId(1)

，它将正确显示，但问题是没有进行新的提取来获取Context中更改的dataId的新数据。不确定我可以使用哪种正确的生命周期方法来检测上下文中的更改并重新调用 this.details（）

我没有在此处添加 Context 代码，因为它可以正常工作。但是如果您需要查看它，请告诉我。

Answer 1

在反应中，您必须使用生命周期挂钩检查诸如prop或context之类的数据，以了解状态是否需要为您的组件进行更新。为此，最常见的生命周期挂钩是componentDidUpdate()。它使您能够根据导致组件更新的属性更改来决定组件是否需要更新状态/渲染。以下应该适用于您的用例：

import { MyContext } from './Context'

class MyComponent extends Component {

    state = {
        data:[],
        dataId:null
    }


    details = () => {
        // we only want to update if dataId actually changed.
        if(this.context.state.dataId !== this.state.dataId){
            this.setState({dataId:this.context.state.dataId});
            fetch('https://api.mydomain.com/' + this.context.state.dataId)
                .then(response => response.json())
                .then(data => this.setState({ data: data }));
        }
    }

    componentDidMount() {
        this.details()
    }

    componentDidUpdate() {
        this.details();
    }

    render() {

        return(

        <MyContext.Consumer>
            {(context) => (
                <div>data: {JSON.stringify(this.state.data)} dataId: {context.state.dataId}</div>

            )}
        </MyContext.Consumer>

        )
    }
}

MyComponent.contextType = MyContext;
export default MyComponent;

当上下文在React中更改时获取数据

1 个答案: