Извлекать данные при изменении контекста в React
Мне нужно сделать новый запрос 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)
и это будет отображаться правильно, но проблема в том, что не выполняется новая выборка для получения новых данных для dataId, который изменился в контексте. не уверен, какой правильный метод жизненного цикла я могу использовать для обнаружения изменений в контексте и сделать новый вызов это.детали()
Я не добавлял сюда код Контекст, потому что он отлично работает. но если вам нужно увидеть это, пожалуйста, дайте мне знать.
componentDidUpdate() кажется, отсутствует. как именно вы ожидаете узнать, когда контекст изменится, и реагировать соответствующим образом?
Я переместил его из конструктора в ComponentDidMount()
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
В React вы должны использовать хуки жизненного цикла для проверки данных, таких как свойства или контекст, чтобы узнать, нужно ли обновлять состояние для вашего компонента. Наиболее распространенный хук жизненного цикла для этой цели — 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;
Спасибо. это работало нормально. Я удалил только часть componentDidMount.
просто комментарий связывает ваши функции или использует функции стрелок
details = () => {}