React中如何将数组转为JSON并在Bootstrap表格绑定数据

核心逻辑 #

不需要使用JSON.stringify，Bootstrap表格绑定的核心是直接遍历数组，将每个元素的path和mode属性映射到表格单元格中。

具体实现步骤 #

假设你通过Octokit获取到的目标数组存储在组件状态fileData中，按以下方式修改代码：

1. 正确存储获取到的数据 #

确保组件状态正确接收Octokit返回的数组：

import { useState, useEffect } from 'react';
import { Octokit } from '@octokit/rest';

const FileTable = () => {
  const [fileData, setFileData] = useState([]);

  useEffect(() => {
    const fetchRepoData = async () => {
      const octokit = new Octokit();
      // 替换为你的实际请求参数
      const res = await octokit.rest.repos.getContent({
        owner: 'your-username',
        repo: 'your-repo',
        path: 'target-path'
      });
      // 将返回的数组存入状态
      setFileData(res.data);
    };

    fetchRepoData();
  }, []);

2. 渲染Bootstrap表格 #

直接遍历fileData数组，渲染每行的path和mode：

return (
    <div className="container mt-3">
      <table className="table table-hover">
        <thead>
          <tr>
            <th>文件路径</th>
            <th>模式</th>
          </tr>
        </thead>
        <tbody>
          {/* 遍历数组生成表格行，注意添加唯一key */}
          {fileData.map((file, idx) => (
            <tr key={idx}>
              <td>{file.path}</td>
              <td>{file.mode}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default FileTable;

问题排查点 #

• 先通过console.log(fileData)确认状态中是否有正确的数组数据，排查Octokit请求是否成功。
• 检查数组元素的字段名是否确实是path和mode，避免拼写错误。
• JSON.stringify会将对象转为字符串，直接渲染会显示成纯文本，这不是表格绑定的正确方式，必须直接访问对象属性。

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