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

Question

I have an array of strings, and it's count in state:

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

So in the beginning I always have an element in the state. On a button click I'm adding to the count and the list:

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

I'm rendering multiple text fields based on this count, and the value of those text fields is set from the array index (range is a custom function, returns array of values from start -> end):

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

But whenever I click the add button, new field is rendered and the value of new fields is set to undefined (strings array is not updated yet), and I get a warning:

index.js:1 Warning: A component is changing an uncontrolled input of type url to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component

How can I delay the render until list is resized? I've tried moving setCount() to useEffect() but doing that doesn't make the new fields show up at all.

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

Answer 1

Try this

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