React 在 componentDidUpdate 中获取新数据
React get new data in componentDidUpdate
我有一个组件可以从两个或三个 API 接收新闻列表。组件第一次呈现时,调用 api 并在 componentDidMount
中呈现数据
像这样:
componentDidMount() {
this.state.platforms.forEach((platform, i) => {
let objToSend = {
phrase: this.props.searchParams.phrase,
// this is the main place when input data changes
...this.props.searchParams.general_params,
...this.props.searchParams.platforms[i].api_params,
stringPath: platform,
apiPath: this.props.searchParams.platforms[i].apiPath,
}
this.props.loadData(objToSend)
// this is the api call using redux which sends data as props to this component
}
new 当短语更改时,我希望此组件重新渲染并重新运行 componentDidMount,但它不起作用,因为 componentDidMount 将 运行 一次。
所以我使用了 componentDidUpdate,但是由于有很多调用所以 api 正在不断更新。
每次更改短语时,如何让组件重新渲染并重新运行 componentDidMount
这是重新渲染时 something()
的一种方法。
import React, { Component } from 'react';
import { render } from 'react-dom';
const fakeFetch = (n) => {
console.log(`Doing fake fetch: ${n}`)
return n
}
class App extends Component {
state = {
value: false,
number: 0,
}
componentDidMount() {
const number = fakeFetch(this.state.number + 1);
this.setState({ number })
}
componentDidUpdate(prevProps, prevState) {
if (prevState.value !== this.state.value) {
const number = fakeFetch(this.state.number + 1);
this.setState({ number })
}
}
toggle = () => {
this.setState(({ value }) => ({ value: !value }))
}
render() {
return (
<React.Fragment>
<h1>Number: {this.state.number}</h1>
<button onClick={this.toggle}>re-render</button>
</React.Fragment>
);
}
}
render(<App />, document.getElementById('root'));
实例here.
您可以使用 componentDidUpdate
个参数(previousProps
、previousState
)来检查是否发生了一些新的变化。
例子
componentDidUpdate(previousProps, previousState) {
if (previousProps.phrase !== this.props.phrase) {
//Do whatever needs to happen!
}
}
我用这种方式停止了我的情况的无限循环。
我有一个组件可以从两个或三个 API 接收新闻列表。组件第一次呈现时,调用 api 并在 componentDidMount
中呈现数据
像这样:
componentDidMount() {
this.state.platforms.forEach((platform, i) => {
let objToSend = {
phrase: this.props.searchParams.phrase,
// this is the main place when input data changes
...this.props.searchParams.general_params,
...this.props.searchParams.platforms[i].api_params,
stringPath: platform,
apiPath: this.props.searchParams.platforms[i].apiPath,
}
this.props.loadData(objToSend)
// this is the api call using redux which sends data as props to this component
}
new 当短语更改时,我希望此组件重新渲染并重新运行 componentDidMount,但它不起作用,因为 componentDidMount 将 运行 一次。 所以我使用了 componentDidUpdate,但是由于有很多调用所以 api 正在不断更新。
每次更改短语时,如何让组件重新渲染并重新运行 componentDidMount
这是重新渲染时 something()
的一种方法。
import React, { Component } from 'react';
import { render } from 'react-dom';
const fakeFetch = (n) => {
console.log(`Doing fake fetch: ${n}`)
return n
}
class App extends Component {
state = {
value: false,
number: 0,
}
componentDidMount() {
const number = fakeFetch(this.state.number + 1);
this.setState({ number })
}
componentDidUpdate(prevProps, prevState) {
if (prevState.value !== this.state.value) {
const number = fakeFetch(this.state.number + 1);
this.setState({ number })
}
}
toggle = () => {
this.setState(({ value }) => ({ value: !value }))
}
render() {
return (
<React.Fragment>
<h1>Number: {this.state.number}</h1>
<button onClick={this.toggle}>re-render</button>
</React.Fragment>
);
}
}
render(<App />, document.getElementById('root'));
实例here.
您可以使用 componentDidUpdate
个参数(previousProps
、previousState
)来检查是否发生了一些新的变化。
例子
componentDidUpdate(previousProps, previousState) {
if (previousProps.phrase !== this.props.phrase) {
//Do whatever needs to happen!
}
}
我用这种方式停止了我的情况的无限循环。