Неожиданное поведение при отображении списка кнопок в React - PullRequest
Новая
       1

Неожиданное поведение при отображении списка кнопок в React

0 голосов
/ 17 июня 2020

Я пытаюсь создать список кнопок с помощью этого метода. Я переписал его как тестовый экземпляр, и поведение такое же - когда вы визуализируете кнопки, вызывается функция в onClick, и ее нельзя вызвать снова, щелкнув сгенерированные кнопки. В этом случае регистрируются от 1 до 5. 

function App() {

const [buttonList, setButtonList] = useState();

const experimental = async (e) => {
  const array = [1,2,3,4,5];
  const listItems = array.map((item) =>
      <li key={item}>
      <button onClick={console.log(item)}>This is a test</button>
      </li>
    );
  setButtonList(listItems);
  }

  return (
    <div className="App">
      <header className="App-header">
        <button onClick={experimental}>Click to render</button>
        <ul>{buttonList}</ul>
      </header>
    </div>
  );
}

Может ли кто-нибудь объяснить мне такое поведение и / или предложить способ сделать это, который этого не делает?

1 Ответ

0 голосов
/ 17 июня 2020

Из-за контекста this. Это должно быть () => {}. Давайте вместо этого будем использовать функцию и хук useCallback.

...