React 16.13：useState 在渲染前等待状态更新

Question

我有一个字符串数组，它在状态中计数：

const [count, setCount] = useState(0);
const [strings, setStrings] = useState([""]);

所以一开始我总是有一个元素处于状态。 单击按钮时，我将添加到计数和列表中：

function onClickAdd() {
    setStrings(prev => [...prev, ""]);
    setCount(count + 1);
}

我正在根据这个计数呈现多个文本字段，这些文本字段的值是从数组索引设置的（范围是自定义函数，从开始 -> 结束返回值数组）：

function makeInputs(count, onRemove) {
    return range(1, count).map(id => {
        return (
            <TextInput type="url" validate onChange={e => onChange(e, id)} value={strings[id]}
               icon={<Button style={{backgroundColor: "red"}} onClick={() => onRemove(id)}><Icon>remove</Icon></Button>} />
        );
    });
}

但是每当我单击添加按钮时，都会呈现新字段并且新字段的值设置为未定义（字符串数组尚未更新），并且我收到警告：

index.js:1 警告：组件正在更改要控制的 url 类型的不受控制的输入。输入元素不应从不受控切换到受控（反之亦然）。在组件的生命周期内决定使用受控或不受控的输入元素

如何在调整列表大小之前延迟渲染？ 我尝试将setCount() 移动到useEffect()，但这样做根本不会显示新字段。

https://codesandbox.io/s/aged-dew-eud84?fontsize=14&hidenavigation=1&theme=dark

Answer 1

试试这个

  function Form() {
  const [values, setValues] = useState([]);

  return (
    <div>
      <button onClick={() => setValues([...values, ""])}>Add</button>

      {values.map((value, idx) =>
        <div key={String(idx)}>
          <input
            type="text"
            value={value}
            onChange={(e) => {
              values[idx] = e.target.value;

              setValues([...values]);
            }}
          />
        </div>
      )}
    </div>
  );
}