reactjs - 在 FunctionComponents 中动态创建 React.Dispatch 实例

Question

如何在不触发使用 useState 的错误的情况下在 react 中创建一个被“监视”的输入元素数组在 FunctionComponent 的主体之外？
如果我有以下内容(未经测试的简化示例):

interface Foo {
  val: string;
  setVal: React.Dispatch<React.SetStateAction<string>>;
}
function MyReactFunction() {
  const [allVals, setAllVals] = useState<Foo[]>([])
  const addVal = () => {
    const [val, setVal] = useState('')
    setAllVals(allVals.concat({val, setVal}))
  }
  return (
    <input type="button" value="Add input" onClick={addVal}>
    allVals.map(v => <li><input value={v.val} onChange={(_e,newVal) => v.setVal(newVal)}></li>)
  )
}

我会收到错误 Hooks can only be called inside of the body of a function component.如何使用 FunctionComponents 在上面的代码中动态添加“监视”元素？
编辑
我意识到上面每个

的单独组件可以解决这个问题，但我正在尝试与 Microsoft Fluent UI 集成，所以我只有 onRenderItemColumn Hook 使用，而不是能够为每个列表项或行创建单独的组件。
编辑 2
回应 Drew Reese 的评论:抱歉，我是 react 的新手，对 Vue 更熟悉，所以我显然使用了错误的术语(观察、引用、 react 等)。我将如何重写我提供的代码示例，以便:

安 add按钮

每次按下按钮时，都会添加另一个输入元素。

每次在 input 元素中输入新值时，input 元素都会显示值

当输入元素更新其值或添加新输入元素时，不会过度或不必要地重新渲染 DOM

我可以访问所有输入元素中的所有值。例如，如果按下单独的提交按钮，我可以获得每个输入元素中所有字符串值的数组。在我提供的代码中，这将是 allVals.map(v => v.val)

Answer 1

const [val, setVal] = useState('')不被允许。等效的效果只是将 value 设置为 allVals 的特定索引。 .
假设您只是向(而不是从中删除)添加新项目 allVals ，以下解决方案将起作用。这个简单的片段只是向您展示了基本思想，您需要适应您的用例。

function MyReactFunction() {
  const [allVals, setAllVals] = useState<Foo[]>([])
  const addVal = () => {
    setAllVals(allVals => {
      // `i` would be the fixed index of newly added item
      // it's captured in closure and would never change
      const i = allVals.length
      const setVal = (v) => setAllVals(allVals => {
        const head = allVals.slice(0, i)
        const target = allVals[i]
        const tail = allVals.slice(i+1)
        const nextTarget = { ...target, val: v }
        return head.concat(nextTarget).concat(tail)
      })

      return allVals.concat({
        val: '',
        setVal,
      })
    })
  }
  return (
    <input type="button" value="Add input" onClick={addVal} />
    {allVals.map(v => 
      <li><input value={v.val} onChange={(_e,newVal) => v.setVal(newVal)}></li>
    )}
  )
}