>source

별도의 구성 요소로 navbar가 있고 페이지의 나머지 부분이있는 레이아웃이 있습니다. 내 문제는 navbar에서 표시되는 클래스를 변경할 때 페이지가 각 클래스에 대한 관련 정보를 표시하도록 상태를 변경하고 싶습니다. navbar에서 필요한 모든 정보를 얻고 있으므로 문제가 없습니다. 문제는 상태를 업데이트하는 방법에 대한 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>
        )}
}

  • 답변 # 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>
            )}
    }
    
    

관련 자료

  • 이전 download - Java Apache FTPClient에서 가장 많이 다운로드 한 파일이 비어 있거나 없습니다
  • 다음 java - Kotlin의 List 에서 올바른 값을 얻는 방법