#reactjs #react-component #react-state #react-state-management
#reactjs #реагирующий компонент #react-state #реагирование-управление состоянием
Вопрос:
У меня есть макет, в котором есть панель навигации как отдельный компонент, а остальная часть страницы, моя проблема в том, что когда я меняю отображаемые классы в панели навигации, я хочу, чтобы страница меняла свои состояния, чтобы показывать соответствующую информацию для каждого класса, я получаю всю необходимую информацию из панели навигацииитак, проблема не в этом, я думаю, проблема в 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. в чем проблема на данный момент? Я вижу, вы уже устанавливаете состояние с помощью полученных данных.
2. это правильно, но когда я пытаюсь показать другой класс с помощью панели навигации, он не изменяет состояние, он принимает только состояние, назначенное сначала, и панель навигации отправляет соответствующую информацию правильно, но Class.js не использует его для изменения своего состояния и получения информации, связанной с этимкласс из api
3. вы имеете в виду в панели вкладок? Где находится часть, показывающая изменение класса? Вы меняете класс в родительском компоненте?
4. Все это отображается в маршрутизаторе? Является
ClassNumberли часть некоторого состояния маршрута отправленной из ссылки вNavbar? В чем проблема? Вы пытаетесь переключитьTabPane tab="Curriculum"вкладку? Я не вижу проблемы с тем, как обновляется состояние, поэтому немного неясно, в чем, по вашему мнению, проблема.5. да, я использую маршрутизатор, и ссылка отправляет ClassNumber, имя и отправляет их без проблем, и я проверяю информацию с помощью consol.log, но он не получает информацию из api после изменения props.location, как я могу заставить его использовать axios для полученияинформация после изменения props.location, которую файлы получают из панели навигации, изменяется??
Ответ №1:
Я думаю, ваша проблема связана с обновлением состояния, верно ?. Затем вам нужно передать prevProps и prevState в качестве параметров в componentDidUpdate. Чтобы отслеживать изменения в реквизитах, вы должны извлекать вызовы 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>
)}
}
Комментарии:
1.
componentDidUpdateсработает независимо от того, проверяете ли вы предыдущие реквизиты или нет, но престижность, если это решит проблему.2. Но это условие не позволяет всегда обновлять
3. Используйте хуки useEffect, братан, это просто