React映射API返回值后动态表单添加/移除字段失效问题

问题根源 #

你现在同时维护了haveFaq和tempData两个状态：渲染页面用的是haveFaq，但增删、输入修改操作全是针对tempData的，两者完全脱节，导致操作后页面不会同步更新，功能自然失效。

解决方案：合并状态，统一操作 #

把两个状态合并成一个，用单一状态管理从API获取的初始数据和后续所有操作，让视图、操作、状态三者保持同步。

修改后的完整代码 #

import { useState, useEffect } from 'react';

const DynamicFaqForm = () => {
  // 用单一状态管理所有FAQ表单数据，初始为空数组
  const [faqData, setFaqData] = useState([]);

  // 模拟API获取数据（实际项目替换为真实请求）
  useEffect(() => {
    const fetchFaqData = async () => {
      const apiResponse = [
        { question: "question1", answer: "answer1" },
        { question: "question2", answer: "answer2" },
        { question: "question3", answer: "answer3" },
      ];
      setFaqData(apiResponse);
    };
    fetchFaqData();
  }, []);

  // 处理表单输入变化
  const handleFormChange = (event, index) => {
    const updatedData = [...faqData];
    updatedData[index][event.target.name] = event.target.value;
    setFaqData(updatedData);
  };

  // 添加新的FAQ项
  const addFields = () => {
    setFaqData([...faqData, { question: "", answer: "" }]);
  };

  // 删除指定索引的FAQ项
  const removeFields = (index) => {
    const updatedData = [...faqData];
    updatedData.splice(index, 1);
    setFaqData(updatedData);
  };

  return (
    <>
      {faqData.map((form, index) => {
        return (
          <div key={index}>
            <div className="form-row">
              <div className="col-md-11 mb-3">
                <label className="font-weight-bold">
                  question
                </label>
                <input
                  className="form-control"
                  name="question"
                  placeholder="question"
                  onChange={(event) => handleFormChange(event, index)}
                  value={form.question}
                />
              </div>

              <div className="col-md-1 mt-4 iconSelf">
                <p
                  className="btnRemove"
                  type="button"
                  onClick={() => removeFields(index)}
                >
                  ❌
                </p>
              </div>
            </div>

            <div className="form-row">
              <div className="col-md-12 mb-3">
                <label className="font-weight-bold">
                  answer
                </label>
                <textarea
                  rows={5}
                  className="lineHeightAnswer form-control"
                  name="answer"
                  placeholder="answer"
                  onChange={(event) => handleFormChange(event, index)}
                  value={form.answer}
                />
              </div>
            </div>
            <hr />
          </div>
        );
      })}

      <div>
        <button
          className="btn btn-info"
          type="button"
          onClick={addFields}
        >
          Add New
        </button>
      </div>
    </>
  );
};

export default DynamicFaqForm;

关键修改点 #

• 移除冗余的haveFaq和tempData状态，改用单一状态faqData统一管理
• 所有增删改操作直接修改faqData并通过setFaqData更新状态，确保视图同步
• 渲染部分直接映射faqData，让操作和展示完全绑定
• 补充了API数据获取的模拟逻辑，实际项目替换为真实接口请求即可

内容的提问来源于stack exchange，提问作者Anna