React -未捕获的范围错误:超出了最大调用堆栈大小

Question

我是React的初学者。js并试图理解道具的概念

我有两个组件 -

1. UserData.jsx
2. UserDataResult.jsx

在UserData中。jsx我用过这个。用户记录的状态。我想通过子组件UserDataResult.jsx显示此记录。

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

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

代码:

**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;

**用户数据结果. 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

为构造函数尝试以下操作：

你需要包含道具，以允许 React 正确地将道具传递到组件中。我不记得确切的原因。

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

您需要将状态视为全天候不可变的。总是用更新的值替换它。

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

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

现在想想，这样做是坏事。你想做我上面展示的，Bob的例子是这样的：

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

这样做的目的是创建一个新对象，并将现有状态“传播”到其中，因此所有状态都保持不变，然后它只需添加bob：'ok'作为该新对象的属性，并且由于它发生在/下面，因此它优先并覆盖名为bob的现有键。

这有点高级，但您应该知道减速器努力成为纯函数，并且不可变地使用React非常重要。做一些阅读。

这些东西与组件重新渲染的位置、时间和原因有关。它是React出色性能的核心。

如果从render函数或生命周期方法内部调用< code>this.setState()，它可能会进入无限循环，因为setState会触发组件的重新呈现，而重新呈现又会再次触发setState。