javascript - 如何正确地将 State 传递给 React 中的不同函数？

Question

我尝试使用 React 编写一个简单的剪刀石头布应用程序。现在我完全坚持将动态绘制的单选按钮中的选择返回到主应用程序。

我已经尝试了无数种方法来让它工作 -> 您可以在下面找到最后一段尝试过的代码。我必须做些什么才能真正让它发挥作用？

谢谢!

const Plays = (props) => {

  return (
    props.options.map(option =>
      <label key={option.name}>
        <input
          disabled={isEnemy(props.playerName)}
          key={props.playerName + option.name}
          className="gameItem"
          type="radio"
          onChange={(event) => {
            return props.setPlayerPick(option.name);
          }}
          value={props.playerName + option.name}
        />
        <img className="crop" src={option.img} alt="" />
      </label>)
  );
}

const App = () => {

  const [playerPick, setPlayerPick] = useState('')

  const options = [
    { name: 'rock', img: rock },
    { name: 'paper', img: paper },
    { name: 'scisscors', img: scissors }
  ]

  const playerName = ['Enemy', 'Player'];

  const handleOnSubmit = (event) => {
    console.log(playerPick);
  }

  return (
    <>
      <div className="description">
        This is a simple ( Rock | Paper | Sciscors ) game against a computer!
      </div>
      <div className="body">
        <div className="playerName">Enemy</div>
        <Plays options={options} playerName={playerName[0]} />
        <div className="playerName">You</div>
        <Plays handleChoosing={setPlayerPick()} options={options} playerName={playerName[1]} />
        <button onClick={handleOnSubmit} className="goButton">Go!</button>
      </div>
    </>
  );
}

重新渲染太多。 React 限制渲染次数以防止无限循环。

这是我现在得到的错误，所以我觉得我成功地结束了状态，但它确实经常呈现。

Answer 1

handleChoosing={setPlayerPick()} 将在每次渲染时再次渲染组件，从而导致无限循环。您可能只想传递函数，而不是调用它。大概是这样的:

<Plays setPlayerPick={setPlayerPick} options={options} playerName={playerName[1]} />