Reactjs 呈现方法问题-React js

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

setState（…）：无法在现有状态转换期间更新（例如在

render

或其他组件的构造函数中）。渲染方法应该是道具和状态的纯函数；构造函数的副作用是一种反模式，但可以移动到

组件willmount

过滤器.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>
        )
    }
}  

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;

从“React”导入React；
从“DefaultOpts.jsx”导入DefaultOpts；
导出默认类筛选器扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
选项：[]
}
this.handleOptions=this.handleOptions.bind（this）
}
手动操作（参数）{
console.log（参数）
这是我的国家({
选项：params
});
}
componentDidMount（）{
}
componentDidUpdate（）{
}
render（）{
返回(
)
}
}  

DefaultOpts.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>
        )
    }
}  

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;

从“React”导入React；
类DefaultOpts扩展了React.Component{
建造师（道具）{
超级（道具）；
}
componentDidMount（）{
}
componentDidUpdate（）{
}
render（）{
var optArray=“”；
$.ajax({
键入：“获取”，
url:“url路径”，
成功：功能（数据）{
optArray=数据；
}
});
返回(
{this.props.handleOptions（optArray）}
)
}
}
导出默认选项；

---

我在stackoverflow中得到了一些答案，但我无法在代码中找到问题所在。请在这里告诉我我的代码出了什么问题

渲染将在didMount之前执行。。。因此，您正在设置安装前的状态

---

无论如何，将$.ajax调用移动到didMount，您不应该在render（）中执行逻辑操作

您不能在

渲染

中调用

this.props.handleOptions

，因为它将触发父组件的

设置状态

，而您仍在渲染过程中。这就是它抱怨的原因

---

尝试在

组件didmount中执行此函数（与ajax调用一起）
您的代码有几个问题：

1） 导致上述错误的第一个也是最主要的一个原因是，通过在render中调用
handleOptions
，您正在调用setState，而setState又开始了react生命周期。这是一种非常糟糕的做法，应该/可以避免

2） 您在render中还有一个对
$.ajax
的异步调用，它不会直接导致状态更新，但仍然被认为是一种不好的做法

总之，渲染函数不能导致执行任何应用程序逻辑，它的任务是渲染已经准备好的结果。在componentDidMount/componentDidUpdate中完成所有繁重的/异步的工作，您就会没事。
问题在于您在
DefaultOpts
的呈现方法中调用了
handleOptions
。这意味着在渲染期间将调用该函数。虽然您确实可以在渲染内部调用函数，但您不能在渲染期间执行
setState
，这是
handleOptions
在parent.nice中所做的，但是（1）是一个大禁忌-不仅仅是一个“坏习惯”。