React 16.13:useState等待状态更新后再渲染

Question

我有一个字符串数组，它的计数状态为：

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

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

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

我根据这个计数呈现多个文本字段，这些文本字段的值是从数组索引中设置的(range是一个自定义函数，从开始到结束返回值的数组(：

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&隐藏导航=1&主题=深色

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