Question

这里我试图从DefaultOpts.jsx获取值并将值更新为Filters.jsx中的setState。但是我收到的错误如下：

setState（...）：无法在现有状态转换期间更新（例如在render或其他组件的构造函数中）。渲染方法应该是道具和状态的纯函数;构造函数副作用是一种反模式，但可以移到componentWillMount。

Filters.jsx

import React from 'react';
import DefaultOpts from 'DefaultOpts.jsx';

export default class Filters extends React.Component {

    constructor(props) {
        super(props);        
        this.state = {
            vOptions : []
        }
        this.handleOptions = this.handleOptions.bind(this)
    }

    handleOptions(params) {
        console.log(params)
        this.setState({
            vOptions : params
        });
    }

    componentDidMount() {
    }

    componentDidUpdate() {
    }

    render() {

        return (

            <div> 

                <DefaultOpts handleOptions={this.handleOptions.bind(this)} />

            </div>
        )
    }
}

DefaultOpts.jsx

import React from 'react';

class DefaultOpts extends React.Component{

    constructor(props) {
        super(props);
    }

    componentDidMount() {        
    }

    componentDidUpdate() {

    }

    render() {

        var optArray = "";

        $.ajax({
            type: "get",
            url: "url-path",
            success: function(data) {
                optArray = data;
            }
        });

        return (
            <div>
                {this.props.handleOptions(optArray)}
            </div>
        )
    }
}

export default DefaultOpts;

我在stackoverflow中得到了一些答案但是我无法在代码中得到什么问题。请在这里建议我在我的代码中有什么问题..

Answer 1

您无法在this.props.handleOptions内调用render，因为它会触发父组件的setState - 您仍然在渲染过程中。这就是它抱怨的原因。

尝试在componentDidMount（与您的ajax调用一起）

中执行此功能

Answer 2

您的代码存在一些问题：

1）导致上述错误的第一个和主要的一个事实是，通过在渲染中调用handleOptions，您调用的是setState，它反过来开始反应生命周期。这是一种非常糟糕的做法，总是应该/可以避免。

2）在渲染中你还有一次对$.ajax的异步调用没有直接导致更新状态，但仍被视为不良做法。

总而言之 - 您的渲染函数不得导致执行任何应用程序逻辑，其任务是渲染已准备好的结果。在componentDidMount / componentDidUpdate中完成所有重/异步工作，你会没事的。

Answer 3

render将在didMount之前执行...所以你在挂载之前设置状态

无论如何将$ .ajax调用移到didMount，你不应该在render（）中做逻辑事务

渲染方法问题 - React js

3 个答案: