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]} />

Answer 2

我相信由于传递给handleChoosing的函数，您会收到错误消息。尝试将其更改为 handleChoosing = {（）=> setPlayerPick（）}

Answer 3

您的问题是这个

handleChoosing={setPlayerPick()}

您将在组件加载时立即调用该函数，因此它将带您进入无限循环。您只需要像这样写setPlayerPick

handleChoosing={setPlayerPick}

在Play组件中，您也不需要返回任何内容，也不需要从父组件中传递道具handleChoosing，但是在Play组件中，您正在使用setPlayerPick这是错误的，

onChange={(event) => {return props.setPlayerPick(option.name);}}

您只需要这样做，

onChange={(event) => props.handleChoosing(option.name)}

如何正确地将State传递给React中的其他函数？

3 个答案: