Javascript 反应挂钩可以'；由于未知原因，请不要使用setState

在这条线上。我添加了一个onChange属性来更改文本框状态并对其进行更新。但它不起作用，我不知道为什么，因为我在其他项目中尝试了相同/类似的事情，并且它工作正常。我能用多少钩子有限制吗？将state设置为具有多个参数的对象而不是多个挂钩是否更好

setTextBox（e.target.value）}>

下面是完整的代码

import React，{useState}来自“React”
导出常量起始页=（）=>{
const[players，SetPlayers]=useState（[“下巴”，“威汉]）
const[view，setView]=useState（选择）
//const[roles，SetRoles]=useState（null）
const[textbox，setTextBox]=useState（“”）
常数选择=(
setView（addPlayer）}>创建游戏
加入游戏
)
const addPlayer=(
setTextBox（e.target.value）}>
添加更多

{players.map（item=>
{item}
）}

)
返回(
{view}
)
}

这是您想要实现的目标吗

const [players, SetPlayers] = useState(['jaw', 'weihan']);
  const [textbox, setTextBox] = useState('');
  const [showPlayersForm, setShowPlayersForm] = useState(false);

  const handleSubmit = e => {
    e.preventDefault();
    SetPlayers(prevState => [...prevState, textbox]);
    setTextBox('');
  };

  const addPlayer = (
    <div className='add-player'>
      <form onSubmit={handleSubmit}>
        <input value={textbox} onChange={e => setTextBox(e.target.value)} />
        <button type='submit'> Add more</button>
      </form>
      <ul>
        // use key when you loop trough items
        {players.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );

  return (
    <div>
      <button onClick={() => setShowPlayersForm(true)}>Create game</button>
      <button> Join Game </button>
      {showPlayersForm && addPlayer}
    </div>
  );

const[players，SetPlayers]=useState（['jaw'，'weihan']）；
const[textbox，setTextBox]=useState（“”）；
const[showPlayerForm，setshowPlayerForm]=useState（false）；
常量handleSubmit=e=>{
e、 预防默认值（）；
SetPlayers（prevState=>[…prevState，textbox]）；
setTextBox（“”）；
};
const addPlayer=(
setTextBox（e.target.value）}/>
添加更多

//在循环项目时使用键
{players.map（（项目，索引）=>(
{item}
))}

);
返回(
SetShowPlayerForm（true）}>创建游戏
加入游戏
{showPlayerForm&&addPlayer}
);

这是您想要实现的目标吗

const [players, SetPlayers] = useState(['jaw', 'weihan']);
  const [textbox, setTextBox] = useState('');
  const [showPlayersForm, setShowPlayersForm] = useState(false);

  const handleSubmit = e => {
    e.preventDefault();
    SetPlayers(prevState => [...prevState, textbox]);
    setTextBox('');
  };

  const addPlayer = (
    <div className='add-player'>
      <form onSubmit={handleSubmit}>
        <input value={textbox} onChange={e => setTextBox(e.target.value)} />
        <button type='submit'> Add more</button>
      </form>
      <ul>
        // use key when you loop trough items
        {players.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );

  return (
    <div>
      <button onClick={() => setShowPlayersForm(true)}>Create game</button>
      <button> Join Game </button>
      {showPlayersForm && addPlayer}
    </div>
  );

const[players，SetPlayers]=useState（['jaw'，'weihan']）；
const[textbox，setTextBox]=useState（“”）；
const[showPlayerForm，setshowPlayerForm]=useState（false）；
常量handleSubmit=e=>{
e、 预防默认值（）；
SetPlayers（prevState=>[…prevState，textbox]）；
setTextBox（“”）；
};
const addPlayer=(
setTextBox（e.target.value）}/>
添加更多

//在循环项目时使用键
{players.map（（项目，索引）=>(
{item}
))}

);
返回(
SetShowPlayerForm（true）}>创建游戏
加入游戏
{showPlayerForm&&addPlayer}
);

它怎么不起作用？您希望状态存储什么，实际结果是什么？另外，在定义

selection

之前是否使用

selection

？我希望每次键入任何内容时都会更改文本框值。这只是一个旁注，不是问题的解决方案，而是每次在输入中键入字符时，代码当前会重新呈现整个组件；您可能需要考虑将页面组件拆分为较小的块，以便只对相关的部分进行重新渲染。code>onChange仅在用户通过单击使字段模糊时更新。您应该使用

onKeyPress

事件。它怎么不起作用？您希望状态存储什么，实际结果是什么？另外，在定义

selection

之前是否使用

selection

？我希望每次键入任何内容时都会更改文本框值。这只是一个旁注，不是问题的解决方案，而是每次在输入中键入字符时，代码当前会重新呈现整个组件；您可能需要考虑将页面组件拆分为较小的块，以便只对相关的部分进行重新渲染。code>onChange仅在用户通过单击使字段模糊时更新。您应该使用

onKeyPress

事件。