React中JSX数据变更但视图未重新渲染问题求助

问题出在Table_Renderer的调用方式：你直接以普通函数形式调用Table_Renderer(rows_data)，而非作为React组件使用。这种写法初次渲染能生效，但React无法正确跟踪该函数的依赖更新，导致状态变更时无法触发视图重新渲染；而热重载会强制重新执行整个组件逻辑，所以数据能正常显示。

具体修改步骤 #

1. 将Table_Renderer改为标准React组件形式，通过props接收数据：

function Table_Renderer({ rowsData }) { // 解构props获取数据
  return (
    <table>
      <thead>
        {/* 此处填充你的表头内容 */}
      </thead>
      <tbody>
        {rowsData.map(row => (
          <tr key={row.id}> {/* 务必给列表元素添加唯一key */}
            {/* 此处填充表格单元格内容 */}
          </tr>
        ))}
      </tbody>
    </table>
  )
}

2. 在App组件中以JSX标签方式调用该组件：

return (
  <div>
    <Table_Renderer rowsData={rows_data} />
  </div>
);

补充说明 #

• 给map生成的<tr>添加唯一key是React列表渲染的要求，能避免性能问题和控制台警告。
• 组件命名采用大驼峰式（比如TableRenderer）更符合React规范，保持原命名也可正常使用。
• 状态更新时，React会重新渲染App组件，进而触发子组件Table_Renderer的更新，确保视图与状态同步。

修改后的完整代码：

import { useState, useEffect } from 'react';

function App() {
  const [rows_data, SET_rows_data] = useState([]);

  useEffect(() => {
    get_rows_data(SET_rows_data);
  }, []);

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

  return (
    <div>
      <Table_Renderer rowsData={rows_data} />
    </div>
  );
}

function get_rows_data(SET_rows_data) {
  fetch('你的接口地址')
    .then((res) => res.json())
    .then((data) => {
      SET_rows_data(data["rows"]);
    });
}

function Table_Renderer({ rowsData }) {
  return (
    <table>
      <thead>
        <tr>
          <th>列1</th>
          <th>列2</th>
        </tr>
      </thead>
      <tbody>
        {rowsData.map(row => (
          <tr key={row.id}>
            <td>{row.column1}</td>
            <td>{row.column2}</td>
          </tr>
        ))}
      </tbody>
    </table>
  )
}

export default App;

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