如何在我的 setter 函数的更新对象中创建一个变量？

Question

我正在映射一个对象，每个键都应该有一个按钮来将其值设置为 null。我让它为单个键工作，但我需要它成为地图中每个项目的变量。

const Football = () => {
  const [team, setTeam] = useState({
    qb: null,
    te: null,
    rb: null,
    wr: null,
    flex: null,
  });

  return (
    <div>
      <h5>My Team</h5>
      {Object.keys(team).map((positionKey) => (
        <div key={positionKey}>
          {positionKey.toUpperCase()}: {team[positionKey]?.name}{" "}
          <button onClick={() => setTeam({ ...team, qb: null })}>
            Remove {positionKey} From Team
          </button>
        </div>
      ))}
    </div>
  );
};

我希望 setTeam 中的 qb 键是地图中的变量 positionKey。如果我直接将 positionKey 放入，它会在名为 positionKey 的团队对象中创建一个新键。

setTeam({ ...team, qb: null })

Answer 1

使用 [positionKey] 而不是固定值

onClick={() => setTeam({ ...team, [positionKey]: null })}

参见：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names

如何在我的 setter 函数的更新对象中创建一个变量？

How do I make a variable in the updated object for my setter function?

javascript

reactjs

react-hooks

use-state