如何使选择输入动态反应[重复]

Question

基本上，每次教师变量更新时，我都希望将其添加到选择标签中。我现在的代码：

  const typeOfCreation = [
    {
      id: 0,
      name: 'teachers'
    }
  ]

  const [teachers, setTeachers] = useState([])

const createData = () => {
        const inputValueTeachers = document.getElementById('teachers')
        if (inputValueTeachers?.value == undefined || inputValueTeachers?.value == '') {
          break;
        }

        let oldTeachers = teachers
        oldTeachers.push(inputValueTeachers?.value)
        setTeachers(oldTeachers)

{typeOfCreation.map((creation) => {
          return (
            <div key={creation.id} className={'inputsCreation'}>
              Creation of {creation.name}<br/>
              <input type="text" name="" id={creation.name} /><br/>
              <button onClick={_=>createData(creation.name)}>Create</button>
            </div>
          )
          })}

<select name="" id="66">
              {teachers.map(teacher => {
                return (
                  <option key={teacher} value={teacher}>{teacher}</option>
                )
              })}
            </select>

输入不会动态更新，仅在您保存项目时做出反应的“小重新加载”之后选择 html 输入向我展示教师

请帮忙

Answer 1

您错误地更新了 teachers 状态。它应该是这样的：

let oldTeachers = [...teachers]
oldTeachers.push(inputValueTeachers?.value)
setTeachers(oldTeachers)

或者

setTeachers(p => [...p, inputValueTeachers?.value]);

了解更多：Correct modification of state arrays in React.js