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

我有一个字符串数组，它的状态是count：

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

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

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

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

函数makeInputs（计数，onRemove）{
返回范围（1，计数）.map（id=>{
返回(
onChange（e，id）}value={strings[id]}
icon={onRemove（id）}>remove}/>
);
});
}

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

js:1警告：组件正在将url类型的非受控输入更改为受控。输入元件不应从非受控切换到受控（反之亦然）。决定在组件的使用寿命内使用受控或非受控输入元件

如何延迟渲染直到调整列表的大小？ 我尝试将

setCount（）

移动到

useffect（）

，但这样做根本不会显示新字段

试试这个

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

函数形式（）{
const[values，setValues]=useState（[]）；
返回(
setValues（[…值，“]）}>Add
{values.map（（value，idx）=>
{
值[idx]=e.target.value；
设置值（[…值]）；
}}
/>
)}
);
}

@evolutionbox我正在使用react-materialize-TextInput:@TahirMustafa将您的代码放在a中可以帮助我们检查问题所在。

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