Javascript React组件循环更新（GraphQL）

你好！ 我一直在

超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate内重复调用setState时，可能会发生这种情况。React限制嵌套更新的数量以防止无限循环

这看起来很明显，但我看不到组件中的循环

ComponentWillUpdate（）显示，它在短时间内使用相同的道具和状态调用了许多rerender

提前谢谢

src/TitleList.js

class TitleList extends Component {
    constructor(props) {
        super(props)
        this.state = {'items': null}
    }
     onSortEnd = ({oldIndex, newIndex}) => {
        this.setState({
             items: arrayMove(this.state.items, oldIndex, newIndex),
         });
     };
    render() {
        if (this.props.allTitlesQuery && this.props.allTitlesQuery.loading){
            return <div>Loading</div>
        }
        if (this.props.allTitlesQuery && this.props.allTitlesQuery.error) {
            return <div>Error!</div>
        }
        const titlesToRender = this.props.allTitlesQuery.allTitles
        this.setState({'items': titlesToRender})
        return <SortableList
            items={this.state.items}
            onSortEnd={this.onSortEnd}
        />;
    }
}

类标题列表扩展了组件{
建造师（道具）{
超级（道具）
this.state={'items'：null}
}
onSortEnd=（{oldIndex，newIndex}）=>{
这是我的国家({
items:arrayMove（this.state.items、oldIndex、newIndex），
});
};
render（）{
if（this.props.allTitlesQuery&&this.props.allTitlesQuery.loading）{
回装
}
if（this.props.allTitlesQuery&&this.props.allTitlesQuery.error）{
返回错误！
}
const titlesToRender=this.props.allTitlesQuery.allTitles
this.setState（{'items'：titlesToRender}）
返回；
}
}

循环是由渲染函数中的

this.setState（{'items'：titlesToRender}）

引起的

循环是由渲染函数中的

this.setState（{'items'：titlesToRender}）

引起的，在其他生命周期方法（如componentDidMount或componentWillReceiveProps）中执行此操作：

---

渲染不应修改状态：

您不应在渲染内部调用setState，请在另一个生命周期方法（如componentDidMount或componentWillReceiveProps）中执行此操作：

---

Render不应修改状态：

当您调用this.setState时，它将再次调用您的

Render

。所以，若从render调用setState，它将进入递归循环

您可以尝试以下方法：-

class TitleList extends Component {
    constructor(props) {
        super(props)
        this.state = {'items': null}
    }
    componentDidMount () {
        this.updateState(props);
    }

    componentWillReceiveProps (nextProps) {
        if (this.props.allTitlesQuery.allTitles !== nextProps.allTitlesQuery.allTitles) {
        this.setState(nextProps);
      }
    }

    updateState (props) {
        this.setState({"items":props.allTitlesQuery.allTitles});
    }

     onSortEnd = ({oldIndex, newIndex}) => {
        this.setState({
             items: arrayMove(this.state.items, oldIndex, newIndex),
         });
     };
    render() {
        if (this.props.allTitlesQuery && this.props.allTitlesQuery.loading){
            return <div>Loading</div>
        }
        if (this.props.allTitlesQuery && this.props.allTitlesQuery.error) {
            return <div>Error!</div>
        }
        return <SortableList
            items={this.state.items}
            onSortEnd={this.onSortEnd}
        />;
    }
}

类标题列表扩展了组件{
建造师（道具）{
超级（道具）
this.state={'items'：null}
}
组件安装（）{
本地产（道具）；
}
组件将接收道具（下一步）{
if（this.props.allTitlesQuery.allTitles！==nextrops.allTitlesQuery.allTitles）{
此.setState（下一步）；
}
}
房地产（道具）{
this.setState（{“items”：props.allTitlesQuery.allTitles}）；
}
onSortEnd=（{oldIndex，newIndex}）=>{
这是我的国家({
items:arrayMove（this.state.items、oldIndex、newIndex），
});
};
render（）{
if（this.props.allTitlesQuery&&this.props.allTitlesQuery.loading）{
回装
}
if（this.props.allTitlesQuery&&this.props.allTitlesQuery.error）{
返回错误！
}
返回；
}
}

---

使用

componentDidMount

方法首次呈现数据，如果数据更改，则在调用此方法时使用

componentWillReceiveProps
方法更新。setState将再次调用
呈现。所以，若从render调用setState，它将进入递归循环

您可以尝试以下方法：-

class TitleList extends Component {
    constructor(props) {
        super(props)
        this.state = {'items': null}
    }
    componentDidMount () {
        this.updateState(props);
    }

    componentWillReceiveProps (nextProps) {
        if (this.props.allTitlesQuery.allTitles !== nextProps.allTitlesQuery.allTitles) {
        this.setState(nextProps);
      }
    }

    updateState (props) {
        this.setState({"items":props.allTitlesQuery.allTitles});
    }

     onSortEnd = ({oldIndex, newIndex}) => {
        this.setState({
             items: arrayMove(this.state.items, oldIndex, newIndex),
         });
     };
    render() {
        if (this.props.allTitlesQuery && this.props.allTitlesQuery.loading){
            return <div>Loading</div>
        }
        if (this.props.allTitlesQuery && this.props.allTitlesQuery.error) {
            return <div>Error!</div>
        }
        return <SortableList
            items={this.state.items}
            onSortEnd={this.onSortEnd}
        />;
    }
}

类标题列表扩展了组件{
建造师（道具）{
超级（道具）
this.state={'items'：null}
}
组件安装（）{
本地产（道具）；
}
组件将接收道具（下一步）{
if（this.props.allTitlesQuery.allTitles！==nextrops.allTitlesQuery.allTitles）{
此.setState（下一步）；
}
}
房地产（道具）{
this.setState（{“items”：props.allTitlesQuery.allTitles}）；
}
onSortEnd=（{oldIndex，newIndex}）=>{
这是我的国家({
items:arrayMove（this.state.items、oldIndex、newIndex），
});
};
render（）{
if（this.props.allTitlesQuery&&this.props.allTitlesQuery.loading）{
回装
}
if（this.props.allTitlesQuery&&this.props.allTitlesQuery.error）{
返回错误！
}
返回；
}
}

使用
componentDidMount
方法首次呈现数据，如果数据更改，则使用
componentWillReceiveProps
方法更新