Reactjs 如何在REACTIVE js中动态添加或删除输入字段

我正在建立一个使用Reaction的网站，在那里用户应该能够回答问题.其中一些问题可能有多个答案，所以我希望网站动态添加和删除这些答案的输入字段.这里有一个要澄清的例子:最初，一个问题只有一个输入字段可见，但当用户开始在第一个输入字段中键入时，应该出现第二个(空)输入字段，当他开始在第二个输入字段中键入时，应该出现第三个输入字段，依此类推.

添加输入字段已经很好了，但是空的输入字段(当答案被删除时)也应该被删除，这就是问题的开始.

我使用map函数根据"Answers"数组呈现答案:

{answers.map((answer, index) => (
                      <div key={index}>
                        <label htmlFor={`answer${index + 1}`}>{`answer ${index + 1}:`}</label>
                        <input
                          type="text"
                          className="w-full h-10 px-3 text-base placeholder-gray-600 border rounded-            lg focus:shadow-outline"
                          onChange={(e) => handleAnswerChange(index, e.target.value)}
                        />
                      </div> 
                    ))}

这是"handleswerchange"函数:

const [answers, setAnswers] = useState(['']);

  const handleAnswerChange = (index: number, value: string) => {
    console.log('Index:', index);
    console.log('Value:', value);

    setAnswers(prev => {
      const updatedAnswers = [...prev];
      updatedAnswers[index] = value;

      if (value.trim() === '') {
        updatedAnswers.splice(index, 1);
      }
  
      if (index === updatedAnswers.length - 1 && value.trim() !== '') {
        updatedAnswers.push('');
      }
      return updatedAnswers;
    })

    setAnswers(prev => [...prev]);
  };

  useEffect(() => {
    console.log(answers);
  }, [answers]);

如您所见，我正在记录‘Answers’array.日志(log)显示逻辑工作正常，并且在删除答案时数组会正确更新，但UI不会反映这些更改.

例如:当我输入‘a’、‘z’、‘e’、‘r’时，有5个输入域可见.其中4个包含输入，其中一个(最后一个)为空.这是正确的，也是我所期望的.当我删除第二个输入字段(在本例中为‘z’)的内容时，应该删除该输入字段.记录的数组是[‘a’，‘e’，‘r’，‘’].这也是正确的，但UI不反映该array.

相反，现在为空的第二个输入字段保持可见，末尾的空输入字段被删除.我try 使用索引和答案的组合作为div的键属性，try 使用uuidV4生成唯一键，try 重写‘handleswerChange’函数大约12次，...似乎什么都不管用，所以我希望你们中的一个能帮我解决问题.提前谢谢！