Javascript React js中状态嵌套对象的更改值-映射函数不工作

React非常新，希望用React构建一个简单的前端应用程序（没有数据库）

该应用程序是一个琐碎的游戏，它涉及到创建“用户”，其中包括一个id#、名称、一个“答案”字段，以跟踪他们提供的答案和“分数”，分数是0的整数，直到玩家正确回答问题为止

问题在于创建一个函数，将+1添加到用户的答案中。现在，当我完成函数时，它会将状态保存为对象，因此会给出map（）函数错误

我的代码：

import { Button } from "bootstrap";
import React, { Component, useState } from "react";
import { Header, Table } from "semantic-ui-react";
import NewPlayer from "./NewPlayer";
import DeletePlayer from "./DeletePlayer";

// STATE
class Trivia extends Component {
  constructor(props) {
    super(props);
    this.state = {
      players: [{ name: "PLAYER", id: 0, answers: 0, points: 0 }], // Need to change this
    };
    this.deletePlayer = this.deletePlayer.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.addPlayer = this.addPlayer.bind(this);
    this.answerYes = this.answerYes.bind(this);
  }

  // What I want it to do: onClick, add +1 to answers (eventually, add +1 to points)

  deletePlayer = (e, nid) => {
    e.preventDefault();
    var players = this.state.players;

    for (var i = 0; i < players.length; i++)
      if (players[i].id && players[i].id === nid) {
        players.splice(i, 1);
        break;
      }

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

  addPlayer = (e) => {
    e.preventDefault();
    if (!this.state.newPlayerName) {
      return;
    }
    var currentPlayers = this.state.players;
    const lastID = currentPlayers[currentPlayers.length - 1];
    var variable = lastID.id + 1;
    const newPlayer = {
      name: this.state.newPlayerName,
      id: variable,
      answers: 0,
      points: 0,
    };
    this.setState({ players: [...this.state.players, newPlayer] });
    document.getElementById("name").value = "";
  };

  // FUNCTION THAT NEEDS HELP !!!
  answerYes = (e, id) => {
    // On click, answer goes up +1
    e.preventDefault();
    var players = this.state.players;
    this.setState({ players: this.state.players[id].answers + 1 });
  };

  answerNo = (e, id) => {
    e.preventDefault();
    // Subtract point away
  };
  handleChange(e) {
    this.setState({ newPlayerName: e.target.value });
  }

  render() {
    var { players } = this.state;
    console.log(players);

    return (
      <div>
        <Header as="h1">Players</Header>
        <Table>
          <thead>
            <tr>
              <th>Player #</th>
              <th>Name</th>
              <th>Answers</th>
              <th>Points</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            {players.map((player) => {
              return (
                <tr>
                  <td>{player.id}</td>
                  <td>{player.name}</td>
                  <td>
                    {player.answers}
                    <button
                      onClick={(e) => {
                        this.answerYes(e, player.id);
                      }}
                    >
                      Correct
                    </button>
                    <button
                      onClick={(e) => {
                        this.answerNo(e, player.id);
                      }}
                    >
                      Incorrect
                    </button>{" "}
                  </td>
                  <td>{player.points}</td>
                  <td>
                    <button
                      onClick={(e) => {
                        this.deletePlayer(e, player.id);
                      }}
                    >
                      Delete
                    </button>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </Table>
        <div>
          <form onSubmit={this.addPlayer}>
            <input
              type="text"
              value={this.state.name}
              id="name"
              placeholder="add 
                           player name...."
              onChange={this.handleChange}
            />

            <input type="submit" value="add player" />
          </form>
        </div>
      </div>
    );
  }
}

export default Trivia;

从“bootstrap”导入{Button}；
从“React”导入React，{Component，useState}；
从“语义ui react”导入{Header，Table}；
从“/NewPlayer”导入NewPlayer；
从“/DeletePlayer”导入DeletePlayer；
//陈述
类琐事扩展组件{
建造师（道具）{
超级（道具）；
此.state={
玩家：[{姓名：“玩家”，id:0，答案：0，分数：0}]，//需要更改此项
};
this.deletePlayer=this.deletePlayer.bind（this）；
this.handleChange=this.handleChange.bind（this）；
this.addPlayer=this.addPlayer.bind（this）；
this.answerYes=this.answerYes.bind（this）；
}
//我想让它做的是：onClick，给答案加+1（最终，给分数加+1）
deletePlayer=（e，nid）=>{
e、 预防默认值（）；
var players=this.state.players；
对于（变量i=0；i{
e、 预防默认值（）；
如果（！this.state.newPlayerName）{
返回；
}
var currentPlayers=this.state.players；
const lastID=currentPlayers[currentPlayers.length-1]；
var变量=lastID.id+1；
常数newPlayer={
姓名：this.state.newPlayerName，
id：变量，
答案:0,，
分数:0,，
};
this.setState（{players:[…this.state.players，newPlayer]}）；
document.getElementById（“名称”）.value=“”；
};
//需要帮助的功能！！！
回答是=（e，id）=>{
//点击后，答案上升+1
e、 预防默认值（）；
var players=this.state.players；
this.setState（{players:this.state.players[id].answers+1}）；
};
回答否=（e，id）=>{
e、 预防默认值（）；
//减去一点
};
手变（e）{
this.setState（{newPlayerName:e.target.value}）；
}
render（）{
var{players}=this.state；
控制台日志（播放器）；
返回(
球员
玩家#
名称
答案
要点
行动
{players.map（（player）=>{
返回(
{player.id}
{player.name}
{player.answers}
{
这个.answerYes（e，player.id）；
}}
>
对的
{
这个.answerNo（e，player.id）；
}}
>
不正确
{" "}
{player.points}
{
this.deletePlayer（e，player.id）；
}}
>
删除
);
})}
);
}
}
导出默认细节；

---

现在我得到的错误是：uncaughttypeerror:players.map不是一个函数。我需要帮助保存状态对象。谢谢你

问题是你正在尝试映射

var玩家

，而在点击按钮之前它并不存在

<button
  onClick={(e) => {
  this.answerYes(e, player.id);
  }}>

---

this.setState（{players:this.state.players[id].answers+1}）

似乎不会产生可映射的结果。这是否回答了您的问题？同意，我还是新的反应，我不确定如何正确编辑并保存状态嵌套对象我应该为我的更改按钮实现useEffect？我在寻找任何有助于研究这个问题解决方案的术语。诚然，我目前的逻辑无法与react和state一起工作

useEffect(() => {

var player = this.state.players
}, [] )