React - 未捕获 RangeError：超出最大调用堆栈大小

Question

我是 React.js 的初学者，并试图通过多条记录理解道具和状态的概念。

我有两个组件 -

1. UserData.jsx
2. UserDataResult.jsx

在 UserData.jsx 中，我将 this.state 用于用户记录。这条记录我想通过子组件 UserDataResult.jsx 展示出来。

不知道我做错了什么，所以我在控制台日志中收到错误。

错误是：未捕获 RangeError：超出最大调用堆栈大小

代码：

** UserData.jsx **

import React from "react";    
import UserDataResult from "./UserDataResult.jsx";    

class UserData extends React.Component{    

    constructor (props){
        super(props);

        this.state = {
            users : [
                {
                    id : 1,
                    name : "Jack",
                    age : 32,
                    location : "USA",
                    skill : "Drummer",
                },
                {
                    id : 2,
                    name : "Andrew",
                    age : 35,
                    location : "USA",
                    skill : "Guitar player",
                },
            ]
        };

    } 


    render(){    
        return(
            <section>
                <h6> Headline </h6>
                <hr />

                <div>

                    {
                            this.state.users.map( (contact) => {

                                return <UserDataResult contact={contact} />                              

                            } )
                    }

                </div>    
            </section>
        );
    }
}

export default UserData;

** UserDataResult.jsx **

import React from "react";

class UserDataResult extends React.Component{
    render(){

        return(  

            <section>    
                <div>

                <p> 
                    {this.props.contact.id}
                    {this.props.contact.name}
                    {this.props.contact.age}
                    {this.props.contact.location}
                    {this.props.contact.skill}
                </p> 
                </div>

            </section>
        );
    }
}
export default UserDataResult;

Answer 1

为你的构造函数试试这个：

您需要包含 props 以允许 React 正确地将 props 向下传递到组件中。具体原因我记不得了。

constructor(props) {                  // you need to include props
    super(props);                     // you need to include it here also
    this.state = {
        users = [
            {
                id : 1,
                name : "Jack",
                age : 32,
                location : "USA",
                skill : "Drummer"
            },
            {
                id : 2,
                name : "Andrew",
                age : 35,
                location : "USA",
                skill : "Guitar player"
            }
        ]
    };
} 

以上将让您访问this.state.users，这将是一个数组。

然后，在你的组件中试试这个：

<div>
    <UserDataResult checkResult={this.state.users} />
</div> 

然后，您可以通过推入数组来更新它。

试着做一些能让你这样称呼的东西：

const newUsersArray = this.state.users.push({
        id: 3
        name: 'Bob Ross'
        age: 25
        location: 'Cambodia'
        skill: 'Maximum'
    })

this.setState({ users: newUsersArray })

您需要将状态视为 24/7 不可变。始终将其替换为更新的值。

React 在后台进行各种花哨的比较，并帮助您优化性能。请注意我如何将新用户添加到数组中，然后重新分配它。

这将使您为 Redux 世界做好准备，在这个世界中，我们使用 reducer，直接操作状态是 100% 非法的。

现在请记住，使用 this.state.push() 或 state.users.bob = 'ok' 是不好的。你想做我上面展示的，鲍勃的例子就像：

return {
  ...state,
  bob: 'ok'
}

它所做的是创建一个新对象并将现有状态“传播”到其中，因此所有状态都保持在那一刻，然后它只是将bob: 'ok' 添加为该新对象的属性，因为它发生了在/之后，它优先并覆盖名为bob的现有密钥。

这有点高级，但你应该知道，reducers 努力成为pure functions，并且不可变地使用 React 非常重要。做一些关于它的阅读。

这些内容与组件re-render 的位置、时间和原因有关。它是 React 出色性能的核心。

如果从render函数或生命周期方法内部调用this.setState()，它可能会进入无限循环，因为setState会触发重新渲染组件，并且重新渲染再次触发 setState。