React 在 render 方法中调用函数会导致无限调用堆栈答案

【问题标题】：React calling a function inside the render method leads to endless call stackReact 在 render 方法中调用函数会导致无限调用堆栈
【发布时间】：2018-02-20 17:35:46
【问题描述】：

import React, {Component} from 'react'
import ajax from '../confing/ajax'
import $ from 'jquery'

class Categories extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isActive: '',
            categories: ''
        };
        this.switchLinkToActive = this.switchLinkToActive.bind(this);
    }

    switchLinkToActive(event) {
        event.preventDefault();
        let temp = [];
        console.log(event.target.id);
        for (let i = 0; i < this.state.isActive.length; i++) {
            if (i === parseInt(event.target.id)) {
                temp[i] = true;
            } else {
                temp[i] = false;
            }
        }
        this.setState({
            isActive: temp
        })

    }

    func() {
        let categories = [];
        ajax.request.get('categories').then((resp) => {
            let isActive = new Array(resp.length);
            for (let i = 0; i < resp.length; i++) {
                isActive[i] = false;
            }
            this.setState({
                isActive: isActive
            });
            for (let i = 0; i < resp.length; i++) {
                let element = resp[i];
                categories.push(<a key={element.id} href=""
                                   className={this.state.isActive[i] === true ? "list-group-item list-group-item-action active" : "list-group-item list-group-item-action"}
                                   id={i} onClick={this.switchLinkToActive}>{element.name}</a>);

            }
            this.setState({
                categories: categories
            });
        });
    }

    render() {
       this.func();
        return (
            <div className="list-group col-3">
                {/*{this.state.categories}*/}
                <a key={2} href=""
                   className={this.state.isActive[2] === true ? "list-group-item list-group-item-action active" : "list-group-item list-group-item-action"}
                   id={2} onClick={this.switchLinkToActive}>Custom lemenet</a>
            </div>
        )
    }
}

export default Categories;

在这个例子中，我在render() 方法中调用func()，它会导致类似于stackoverflow 的东西，它只是不会停止调用它。无论如何要解决这个问题？我真的没有找到任何解决方案。如果我说只是在渲染内做一个 for 循环，它会按预期工作，它只被调用一次，那么为什么这个函数被调用了无数次

【问题讨论】：

标签： function reactjs call render callstack

【解决方案1】：

您永远不应该在渲染中使用setstate，而是在life cycle methods 之一中执行此操作，在您的情况下，因为您正在执行ajax 请求，您应该在componentDidMount link 中执行此操作

【讨论】：

好的，所以我在componentdidMout中做，那么我如何将它发送到渲染方法
存储在this.state
您不需要将控件发送到渲染方法。状态改变时自动调用渲染方法

【解决方案2】：

您通常必须在componentDidMount 中拨打您的ajax 电话。如下所示

componentDidMount() {
 this.func();
}

在您的ajax 电话中，一旦您收到回复，请将其设置为状态。所以你的func 看起来像下面这样

func() {
    let categories = [];
    ajax.request.get('categories').then((resp) => {
        for (let i = 0; i < resp.length; i++) {
            resp[i].isActive = false;
        }
        this.setState({
            data : resp,
        });
    });
}

您的render 将使用状态中的数据并适当地呈现所需的 DOM 结构。

render() {

    return (
        <div className="list-group col-3">

            {
             (this.state.data || []).map((element, idx) => 
              categories.push(<a key={element.id} href=""
                               className={element.isActive ? "list-group-item list-group-item-action active" : "list-group-item list-group-item-action"}
                               id={idx} onClick={this.switchLinkToActive}>{element.name}</a>);

             })
           }

            <a key={2} href=""
               className={this.state.isActive[2] === true ? "list-group-item list-group-item-action active" : "list-group-item list-group-item-action"}
               id={2} onClick={this.switchLinkToActive}>Custom lemenet</a>
        </div>
    )
}

【讨论】：