Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/23.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 对象数组上的Setstate使映射崩溃_Javascript_Reactjs - Fatal编程技术网

Javascript 对象数组上的Setstate使映射崩溃

Javascript 对象数组上的Setstate使映射崩溃,javascript,reactjs,Javascript,Reactjs,我试图通过索引更新数组中第一个对象的状态。 这样做的原因是为了了解如何更新数组中的特定对象 更新状态后,我将收到以下错误: Uncaught TypeError: this.state.users.map is not a function 因此,当我尝试更新阵列时,可能是做错了什么 我想在第一次单击按钮时通过id或索引更新第一个用户 国家: this.state = { users: [ {

我试图通过索引更新数组中第一个对象的状态。 这样做的原因是为了了解如何更新数组中的特定对象

更新状态后,我将收到以下错误:

Uncaught TypeError: this.state.users.map is not a function
因此,当我尝试更新阵列时,可能是做错了什么

我想在第一次单击按钮时通过id或索引更新第一个用户

国家:

this.state = {
                users: [
                {
                   "id" : 1,
                   "name": "My Name",
                   "age": 15
                },
                {
                   "id" : 2,
                   "name": "Joe",
                   "age": 35
                },
            ]
        };
和渲染功能:

 render() {
        return (
            <div>
              {this.state.users.map((item, index) =>
                <div>
                <div className="col-12">
                  <label name="id" value={item.id}>{item.id}</label>
                  <input name="name" value ={item.name} text={item.name}/>
                  <input name="name" value ={item.age} text={item.age}/>
                </div>
             </div>
            )}
              <button onClick={(e) => this.updateInput(e)}>Update</button>
            </div>
        );
    }
updateInput = e => {
        var newUser = {
      "id" : 1,
      "name" : "NEW NAAME",
      "age" : 99
      };
        console.log(newUser);
         this.setState(prevState => ({
                        users: {
                            ...prevState.users,
                            [prevState.users[0]]: { newUser }
                        }
                    }));
    };
我的JSFIDLE示例:

首先,应使用数组扩展语法[…]而不是{…},然后如果要更新该数组的第一个元素,应执行以下操作:

updateInput = e => {
    const newUser = {
        id: 1,
        name: "NEW NAME",
        age: 99
    };
    console.log(newUser);
    this.setState(prevState => ({
        users: Object.assign([], prevState.users, { 0: newUser }) 
        // '0' because the index of the first element is 0. 
        // You can also use Object.assign([...prevState.users], { 0: newUser })
    }));
};

您需要用户:[……]数组有方括号;您正在创建一个对象,而不是this.setStateprevState=>{users:prevState.users.mapuser=>user.id==newUser.id?newUser:user};当然,现在我觉得自己很愚蠢。非常感谢你的帮助!谢谢你的帮助。你和Chris G的评论都帮了我的忙@arkhz-很乐意帮忙。如果你想根据id和我的基于索引的id进行更新,请遵循Chris g的答案。是的,请记住这一点。将此作为答案,我觉得你和Chris g都帮助了我!