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>} />
        );
    });
}

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

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>
  );
}

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

1 个答案: