Блог

Я пытаюсь динамически добавлять button к своему компоненту при выборе значения в select . Добавление кнопки на мою страницу работает нормально, но состояние компонента внутри функции обратного вызова кнопки остается со значением по умолчанию.

У меня есть следующая реализация:

 const Component = () => {
  const [value, setValue] = useState('');
  const [buttons, setButtons] = useState([]);
  
  const onChangeValue = (e) => {
    setValue(e.target.value);
    setButtons([...buttons,
      <button
        onClick={() => console.log(value)} // displays '' which is the default state
      >
        Try me
      </button>
    ]);
  }

  return (
    <div>
      <select onChange={onChangeValue}>
        <option value={1}>Option #1</option>
        <option value={2}>Option #2</option>
        <option value={3}>Option #3</option>
      </select>
      {buttons}
    </div>
  );
}
  

Я бы предположил, что состояние моего компонента не «подключено» к кнопкам, но я не уверен, как я могу это сделать.

Я думаю, что событие onClick пытается записать в консоль неправильную переменную. Вы должны поместить event.target.value вместо просто значения.

Вы можете создавать пользовательские компоненты и передавать динамическое значение из useState в качестве реквизита:

 const Component = () => {
  const [value, setValue] = useState('');
  const [buttons, setButtons] = useState([]);
  
  const onChangeValue = (e) => {
    setValue(e.target.value);
    setButtons([...buttons,
      (props) => <button
        onClick={() => console.log(props.value)} 
      >
        Try me
      </button>
    ]);
  }

  return (
    <div>
      <select onChange={onChangeValue}>
        <option value={1}>Option #1</option>
        <option value={2}>Option #2</option>
        <option value={3}>Option #3</option>
      </select>
      {buttons.map((B, i) => <B key={i} value={value}/>)}
    </div>
  );
}
  

Проблема в вашем коде из-за того, что useState поскольку useState он асинхронный. Итак, во время создания компонента значение «пустое», поскольку оно не обновляется из-за асинхронности. Лучший способ — это вид закрытия, который запоминает его состояние. Вы можете просто сделать это, сохранив переменное состояние:

Вот код:

 const Component = () => {
  const [value, setValue] = useState("");
  const [buttons, setButtons] = useState([]);

  const handleClick = (val) => console.log(val);

  const onChangeValue = (e) => {
    e.persist();
    const val = e.target.value;
    setValue(e.target.value);
    if (buttons.length < 3) {
      //avoid unnecessary addition
      setButtons([
        ...buttons,
        <button
          key={value}
          onClick={() => handleClick(val)} // displays '' which is the default state
        >
          Try me
        </button>
      ]);
    }
  }
  

Вот демонстрация:https://codesandbox.io/s/sharp-oskar-qnm51?file=/src/App.js:65-633