React.js中如何用JSON展示表格及从URL加载JSON渲染表格？

没问题！我来帮你把从URL加载JSON并渲染成表格的方案梳理清楚，结合你现有的类组件代码，我会给出两种实现方式——类组件版和现在更常用的函数组件+Hook版，你可以根据自己的习惯选择。

类组件实现方案 #

因为你原来的代码用的是类组件，咱们先基于这个来修改。核心思路是：用组件状态管理异步加载的数据，在组件挂载后发起网络请求，最后根据状态渲染表格（同时处理加载中和出错的情况）。

完整代码如下：

import React, { Component } from 'react';

class App extends Component {
  // 初始化状态：存储数据、加载状态、错误信息
  state = {
    movies: [],
    loading: true,
    error: null
  };

  // 组件挂载后发起异步请求，这是类组件里适合做请求的生命周期
  componentDidMount() {
    // 替换成你的实际JSON数据URL
    fetch('https://your-api-url/movies')
      .then(response => {
        // 要判断响应是否成功，不然HTTP错误（比如404）不会进入catch
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then(data => {
        // 请求成功，更新状态：存入数据，关闭加载状态
        this.setState({
          movies: data,
          loading: false
        });
      })
      .catch(error => {
        // 请求失败，更新状态：存入错误信息，关闭加载状态
        this.setState({
          error: error.message,
          loading: false
        });
      });
  }

  render() {
    const { movies, loading, error } = this.state;

    // 加载中状态提示
    if (loading) return <div>加载中...</div>;
    // 错误状态提示
    if (error) return <div>出错了：{error}</div>;

    // 数据加载完成，渲染表格
    return (
      <table border="1" cellPadding="8" cellSpacing="0">
        <thead>
          <tr>
            <th>ID</th>
            <th>标题</th>
            {/* 如果你的JSON有其他字段，比如年份，这里可以加<th>年份</th> */}
          </tr>
        </thead>
        <tbody>
          {movies.map(movie => (
            // 每个表格行必须加唯一的key，这里用movie.id最合适
            <tr key={movie.id}>
              <td>{movie.id}</td>
              <td>{movie.title}</td>
              {/* 其他字段对应<td>{movie.year}</td> */}
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
}

export default App;

函数组件+Hook实现方案（推荐） #

现在React官方更推荐用函数组件配合Hook来开发，代码更简洁，逻辑更清晰，这里也给你写一个版本：

import React, { useState, useEffect } from 'react';

function App() {
  // 用useState声明状态变量
  const [movies, setMovies] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // 用useEffect执行异步请求，空依赖数组表示只在组件挂载时执行一次
  useEffect(() => {
    fetch('https://your-api-url/movies')
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then(data => {
        setMovies(data);
        setLoading(false);
      })
      .catch(error => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>加载中...</div>;
  if (error) return <div>出错了：{error}</div>;

  // 这里用内联样式美化了表格，你也可以换成CSS类或者UI框架
  return (
    <table style={{ borderCollapse: 'collapse', width: '100%', marginTop: '20px' }}>
      <thead>
        <tr style={{ backgroundColor: '#f5f5f5' }}>
          <th style={{ border: '1px solid #ddd', padding: '10px', textAlign: 'left' }}>ID</th>
          <th style={{ border: '1px solid #ddd', padding: '10px', textAlign: 'left' }}>标题</th>
        </tr>
      </thead>
      <tbody>
        {movies.map(movie => (
          <tr key={movie.id} style={{ backgroundColor: '#fff' }}>
            <td style={{ border: '1px solid #ddd', padding: '10px' }}>{movie.id}</td>
            <td style={{ border: '1px solid #ddd', padding: '10px' }}>{movie.title}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

export default App;

几个重要注意点 #

• 替换URL：把代码里的https://your-api-url/movies换成你实际的JSON数据地址
• JSON结构适配：如果你的JSON数据不是直接的数组（比如包裹在data字段里，像{"data": [...]}），记得在then里取对应字段，比如setMovies(data.data)
• 跨域问题：如果你的React应用和JSON数据的域名不同，可能会遇到CORS错误。开发环境可以在create-react-app里配置package.json的proxy字段，生产环境需要后端配置CORS规则
• 样式自定义：表格的样式可以根据需求调整，比如用Bootstrap、Tailwind等CSS框架来快速美化

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