Блог

Главная - Вопросы по программированию - Реагирующие крючки не могут использовать setState по неизвестной причине

Реагирующие крючки не могут использовать setState по неизвестной причине

#javascript #reactjs

#javascript #reactjs

Вопрос:

В этой строке. Я добавил атрибут 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>
    )
}

Комментарии:

1. Как это не работает? Что вы ожидаете сохранить в состоянии, каков был фактический результат?

2. Кроме того, используете ли вы selection before selection определено?

3. Я ожидаю, что он будет изменять значение текстового поля каждый раз, когда я что-либо печатаю.

4. Это всего лишь примечание, а не решение вашего вопроса, но в настоящее время ваш код повторно отображает весь компонент каждый раз, когда вы вводите символ во входных данных; возможно, вы захотите рассмотреть возможность разделения вашего компонента страницы на более мелкие части, чтобы повторно отображались только соответствующие части.

5. Вы не должны использовать onChange then. onChange обновляется только тогда, когда пользователь размывает поле щелчком мыши. Вы должны использовать onKeyPress событие.

Ответ №1:

 onChange={e =>{
 e.preventDefault()
 setTextBox(e.target.value)
}}

Ответ №2:

Этого вы хотите достичь?

 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 amp;amp; addPlayer}
    </div>
  );