javascript - 由于未知原因，React 钩子无法使用 setState

Question

在这一行。我添加了一个 onChange 属性来更改文本框状态并更新它。但它不起作用，我不知道为什么，因为我在其他项目中尝试了相同/类似的东西并且它工作正常。我可以使用多少个钩子有限制吗？将 setState 作为具有多个参数的对象而不是多个钩子会更好吗？

<input value={textbox} onChange={e => setTextBox(e.target.value)}></input>

以下是完整代码

import React, { useState } from 'react'

export const StartPage = () => {

    const [players, SetPlayers] = useState(["jaw", "weihan"])
    const [view, setView] = useState(selection)
    //const [roles, SetRoles] = useState(null)
    const [textbox, setTextBox] = useState("")

    const selection = (
        <div>
            <button onClick={() => setView(addPlayer)}> Create Game </button>
            <button> Join Game </button>
        </div>
    )


    const addPlayer = (
        <div className="add-player">
            <form>
                <input value={textbox} onChange={e => setTextBox(e.target.value)}></input>
                <button type="submit" > Add more</button>
            </form>
            <ul>
                {players.map(item => <li>{item}</li>)}
            </ul>
        </div>
    )


    return (
        <section id="start-page">
            {view}
        </section>
    )
}

标签： javascriptreactjs

Answer 1

这是你想要实现的吗？

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>
  );