React中如何映射Rails API返回的多层嵌套fulfillments数组？

首先修正组件里的状态初始化和数据同步问题：

• fulfillments状态初始值应为数组（而非对象），因为它存储一组数据：

  const [fulfillments, setFulfillments] = useState([]);
  

• 从API拉取数据时，把返回的fulfillments同步到状态：

  const fetchRequest = () => {
    axios
      .get(`${baseUrl}/${match.params.id}`)
      .then((res) => {
        setRequests(res.data);
        setFulfillments(res.data.fulfillments || []);
        console.log(res.data);
      })
      .catch((err) => console.log(err));
  };
  

多层嵌套数组的映射实现 #

假设你的fulfillments结构是「每个fulfillment包含自身内容+子嵌套数组（比如replies）」，直接用**嵌套map**就能渲染所有层级：

return (
  <div className="request-detail">
    <h2>请求详情</h2>
    {/* 第一层：遍历所有fulfillments */}
    <div className="fulfillments-container">
      {fulfillments.map((fulfillment) => (
        <div key={fulfillment.id} className="fulfillment-card">
          <p>{fulfillment.text}</p>
          <small>发布者：{fulfillment.user?.name}</small>

          {/* 第二层：遍历当前fulfillment的子数组（比如replies） */}
          {fulfillment.replies?.length > 0 && (
            <div className="replies-section">
              <h4>回复</h4>
              {fulfillment.replies.map((reply) => (
                <div key={reply.id} className="reply-card">
                  <p>{reply.text}</p>
                  <small>回复者：{reply.user?.name}</small>

                  {/* 如果有更深层级（比如reply的子评论），继续嵌套map即可 */}
                  {reply.sub_comments?.length > 0 && (
                    <div className="sub-comments">
                      {reply.sub_comments.map((sub) => (
                        <div key={sub.id} className="sub-comment">
                          <p>{sub.text}</p>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              ))}
            </div>
          )}
        </div>
      ))}
    </div>

    {/* 提交新fulfillment的表单 */}
    <form onSubmit={handleSubmit}>
      <textarea
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="输入内容..."
        required
      />
      <button type="submit">提交</button>
    </form>
  </div>
);

核心注意事项 #

• 每个map必须传唯一key（优先用数据的id，别用数组索引），避免React渲染警告。
• 用可选链操作符（?.）和长度判断处理空值，防止undefined报错（比如fulfillment.replies?.length）。
• 提交新数据时修正拼写错误：把原代码的allFullfilments改为allFulfillments，确保数组解构正确：

  const allFulfillments = [...fulfillments, response.data];
  setFulfillments(allFulfillments);
  

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