javascript - React 组件循环更新 (GraphQL)

标签 javascript reactjs ecmascript-6 graphql

再会!
我不断得到

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.



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

ComponentWillUpdate() 表明它在短时间内调用了许多具有相同 Prop 和状态的重新渲染。

提前致谢。

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.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}
        />;
    }
}

使用componentDidMount第一次渲染数据的方法,如果数据更改使用 componentWillReceiveProps 更新方法

关于javascript - React 组件循环更新 (GraphQL),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47977038/

相关文章:

javascript - 知道单击了哪个用户创建的div

javascript - 从字符串中删除前导零和尾随零

javascript - 接受不在列表中的值 - Bootstrap 组合框

svg - 如何使用 Webpack 将多个 SVG 与 React 内联?

javascript - firstChild属性的Javascript更改值

javascript - 使用 React.js 时的一般结构

javascript - 如何从单独的 jsx 文件中设置标题的背景图像?

javascript - 检查前端每个请求的 token 过期时间

javascript - 这个数组真的需要传播语法吗?

javascript - 从 npm 包中导入 ES6 模块