如何从react映射组件更新状态
如何从react映射组件更新状态
提问于 2021-07-05 22:26:27
我有一个api，我想用它来过滤数据并将filterd放入一个状态
export default class ModifyPage_Single extends React.Component {
constructor(props) {
super(props)
this.state = {data:[],idd:""}
}
componentWillMount() {
fetch("removed api")
.then(response => response.json())
.then((data) =>{
this.setState({data:data})
})
}
render() {
const test = this.state.data.map((e) => { if(e.ID === this.props.location.productdetailProps.productdetail) {this.setState({idd:e.PP})} })但是我一直收到这样的错误:未处理的拒绝(错误)：超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate中重复调用setState时，可能会发生这种情况。React限制嵌套更新的数量，以防止无限循环。
我如何解决才能使fitered out api进入状态？
提前感谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-07-05 22:34:14
应该在componentMount中更新，而不是在render()中更新：
export default class ModifyPage_Single extends React.Component {
constructor(props) {
super(props);
this.state = { data: [], idd: "" };
}
componentWillMount() {
fetch("removed api")
.then((response) => response.json())
.then((data) => {
this.setState({ data: data });
data.forEach((e) => {
if (e.ID === this.props.location.productdetailProps.productdetail) {
this.setState({ idd: e.PP });
}
});
});
}
render() {
return null;
}
}Stack Overflow用户
发布于 2021-07-05 22:37:30
你可以在生命周期方法中更新状态，在render中更新它是反模式的
componentDidMount() {
fetch("removed api")
.then(response => response.json())
.then((data) =>{
this.setState({data:data})
const iddObj = data.find((el) => el.ID === this.props.location.productdetailProps.productdetail)
if(iddObj ){
this.setState({idd:iddObj.PP})
}
})
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68257801
复制相关文章
相似问题
腾讯云开发者
