如何使用 axios.get 方法更新反应状态？

Question

我有一个布局，其中有一个导航栏作为单独的组件和页面的其余部分，我的问题是当我更改导航栏中的显示类我希望页面将其状态更改为显示每个 class 的相关信息，我正在从导航栏获取所有需要的信息，所以问题不存在，我认为问题出在 Class.js 文件中关于如何更新状态，请帮助任何人，这是 Class.js 文件：

class Class extends React.Component {
    
    static contextType = userContext
    
    state = {
        Curriculum: [],
        Classworks: [], 
        Homeworks: []
    }

    componentDidMount() {
        console.log(this.props.location.state)
        const provided = this.props.location.state.ClassNumber
        const config = {
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `JWT ${localStorage.getItem('access')}`,
                'Accept': 'application/json'
            }
        }; 
        axios.get(`${process.env.REACT_APP_API_URL}/Elearning/Curriculum/${provided}`, config)
            .then(
                res => {
                    this.setState(
                        {
                            Curriculum: res.data 
                        }
                    );
                }
            )                      
      }
      componentDidUpdate(){
        const provided = this.props.location.state.ClassNumber
        const config = {
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `JWT ${localStorage.getItem('access')}`,
                'Accept': 'application/json'
            }
        }; 
        axios.get(`${process.env.REACT_APP_API_URL}/Elearning/Curriculum/${provided}`, config)
            .then(
                res => {
                    this.setState(
                        {
                            Curriculum: res.data 
                        }
                    );
                }
            )  
      }
    render()
        {       
            console.log(this.state.Curriculum);       
            return(
            <div className="back">
            <Navbar/>
            
            <main className= "MainContent">
                <div className="Class">
                    <h2 className="class">
                        {this.props.location.state.Name}
                    </h2>
                </div>
                <Tabs  className="Tabs" defaultActiveKey="1" centered>
                    <TabPane tab="Curriculum"  key="1">
                        <List
                        itemLayout="horizontal"
                        dataSource={this.state.Curriculum}
                        renderItem={item => (
                            <List.Item>
                                <Table striped bordered hover size="sm" >
                                    <tr>
                                        <th>
                                            #
                                        </th>
                                        <th>
                                            Title
                                        </th>
                                    </tr>
                                    <tr>
                                        <td>
                                            
                                        </td>
                                        <td>
                                            {item.Title}
                                        </td>
                                    </tr>
                                </Table>
                            </List.Item>
                        )}
                        />
                    </TabPane>
                    <TabPane tab="ClassWorks"  key="2">
                    
                    </TabPane>
                    <TabPane tab="HomeWorks" key="3">
                        
                    </TabPane>
                    <TabPane tab="Videos" key="4">
                    
                    </TabPane>
                    <TabPane tab="Sessions" key="5">
                    
                    </TabPane>
                    <TabPane tab="quizzes" key="6">
                    
                    </TabPane>
                    <TabPane tab="Exams" key="7">
                    
                    </TabPane>
                </Tabs>
            </main>
            <br/>
            <footer className="Footer">Designed by Eng. Omar Redwan</footer>
        </div>
        )}
}

Answer 1

我认为您的问题在于更新状态，对吗？。然后您必须将 prevProps 和 prevState 作为参数传递给 componentDidUpdate。要跟踪 props 的变化，您必须仅在 props 发生变化时才获取 prevProps 和 componentDidUpdate 调用。这意味着当位置道具发生变化时，它将更新您需要做的状态。

class Class extends React.Component {
    
    static contextType = userContext
    
    state = {
        Curriculum: [],
        Classworks: [], 
        Homeworks: []
    }

    componentDidMount() {
        console.log(this.props.location.state)
        const provided = this.props.location.state.ClassNumber
        const config = {
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `JWT ${localStorage.getItem('access')}`,
                'Accept': 'application/json'
            }
        }; 
        axios.get(`${process.env.REACT_APP_API_URL}/Elearning/Curriculum/${provided}`, config)
            .then(
                res => {
                    this.setState(
                        {
                            Curriculum: res.data 
                        }
                    );
                }
            )                      
      }
      componentDidUpdate(prevProps,prevState){
if(prevProps.location.state.classNumber!==this.props.location.state.classNumber){
        const provided = this.props.location.state.ClassNumber
        const config = {
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `JWT ${localStorage.getItem('access')}`,
                'Accept': 'application/json'
            }
        }; 
        axios.get(`${process.env.REACT_APP_API_URL}/Elearning/Curriculum/${provided}`, config)
            .then(
                res => {
                    this.setState(
                        {
                            Curriculum: res.data 
                        }
                    );
                }
            )
}  
      }
    render()
        {       
            console.log(this.state.Curriculum);       
            return(
            <div className="back">
            <Navbar/>
            
            <main className= "MainContent">
                <div className="Class">
                    <h2 className="class">
                        {this.props.location.state.Name}
                    </h2>
                </div>
                <Tabs  className="Tabs" defaultActiveKey="1" centered>
                    <TabPane tab="Curriculum"  key="1">
                        <List
                        itemLayout="horizontal"
                        dataSource={this.state.Curriculum}
                        renderItem={item => (
                            <List.Item>
                                <Table striped bordered hover size="sm" >
                                    <tr>
                                        <th>
                                            #
                                        </th>
                                        <th>
                                            Title
                                        </th>
                                    </tr>
                                    <tr>
                                        <td>
                                            
                                        </td>
                                        <td>
                                            {item.Title}
                                        </td>
                                    </tr>
                                </Table>
                            </List.Item>
                        )}
                        />
                    </TabPane>
                    <TabPane tab="ClassWorks"  key="2">
                    
                    </TabPane>
                    <TabPane tab="HomeWorks" key="3">
                        
                    </TabPane>
                    <TabPane tab="Videos" key="4">
                    
                    </TabPane>
                    <TabPane tab="Sessions" key="5">
                    
                    </TabPane>
                    <TabPane tab="quizzes" key="6">
                    
                    </TabPane>
                    <TabPane tab="Exams" key="7">
                    
                    </TabPane>
                </Tabs>
            </main>
            <br/>
            <footer className="Footer">Designed by Eng. Omar Redwan</footer>
        </div>
        )}
}

如何使用 axios.get 方法更新反应状态？

how can I update a state in react using axios.get method?

reactjs

react-component

react-state

react-state-management