React JS添加按钮实现后端API动态填充表格的技术求助

我帮你把代码修改好，实现点击按钮后显示API数据表格的功能，同时保留原页面的其他内容，只在点击后新增表格。下面是完整的修改后代码，之后我会讲关键的修改点：

class HomePage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      apiResponse: '',
      username: '',
      detailsData: [],
      showTable: false, // 新增状态：控制表格是否显示
    };
  }

  callAPI() {
    fetch('/userData') // 修正中文引号为英文引号
      .then(res => res.json())
      .then(res => this.setState({ username: res.username }))
      .catch(err => err);
  }

  componentDidMount() {
    this.callAPI();
  }

  launch = () => {
    const { username } = this.state;
    const newTab = window.open();
    fetch('/LoginUrl')
      .then(res => res.json())
      .then(res => {
        console.info(username);
      })
      .catch(err => err);
  };

  detailButton = () => {
    fetch('/userDetails') // 修正中文引号为英文引号
      .then(res => res.json())
      .then(res => {
        if (res.error) {
          this.showToast(res.error);
          this.setState({ detailsData: [], showTable: false });
        } else {
          // 获取数据成功后，显示表格并更新数据
          this.setState({ detailsData: res.data, showTable: true });
        }
      })
      .catch(err => err);
  };

  // 生成表格的方法
  renderUserTable() {
    const { detailsData } = this.state;
    if (detailsData.length === 0) return null;

    // 取第一条数据的键作为表头
    const headers = Object.keys(detailsData[0]);

    return (
      <div style={{ marginTop: '20px', textAlign: 'center' }}>
        <table style={{ borderCollapse: 'collapse', margin: '0 auto' }}>
          <thead>
            <tr>
              {headers.map(header => (
                <th key={header} style={{ border: '1px solid #ddd', padding: '8px', backgroundColor: '#f2f2f2' }}>
                  {header}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {detailsData.map((row, index) => (
              <tr key={index}>
                {headers.map(header => (
                  <td key={header} style={{ border: '1px solid #ddd', padding: '8px' }}>
                    {row[header]}
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
  }

  pageView() {
    return (
      <div style={{ float: 'none', textAlign: 'center', fontFamily: 'system-ui,-apple-system,Segoe UI,Helvetica,Arial,sans-serif' }}>
        <h1>Hello {this.state.username}</h1>
        <br />
        <Button
          label="Launch" // 修正中文引号为英文引号
          variant="brand"
          onClick={this.launch}
        />
        <Button
          label="Details" // 修正中文引号为英文引号
          variant="brand"
          onClick={this.detailButton}
          style={{ marginLeft: '10px' }} // 给按钮加个间距，更美观
        />
        <br />
        {/* 当showTable为true时渲染表格 */}
        {this.state.showTable && this.renderUserTable()}
      </div>
    );
  }

  render() {
    return (
      <div className='App'>
        {this.pageView()} {/* 修正原代码的detailView为pageView */}
      </div>
    );
  }
}

export default HomePage;

关键修改点说明： #

• 新增状态控制表格显示：在state里加了showTable，默认false，点击Details按钮获取数据成功后设为true，控制表格是否渲染。
• 修正原代码错误：把代码里的中文引号全部改成英文引号（否则会报错），还有render里的this.detailView()改成this.pageView()（原代码里没有detailView方法）。
• 新增表格渲染方法：renderUserTable方法会根据detailsData动态生成表格，先取第一条数据的键作为表头，然后遍历数据生成每一行，同时加了基础的表格样式，让表格看起来更规整。
• 按钮间距优化：给Details按钮加了左边距，避免两个按钮挤在一起。
• 错误处理优化：如果API返回错误，不仅清空数据，还会隐藏表格。

这样修改后，点击Details按钮就会从API获取数据并显示表格，其他UI保持不变，完全符合你的需求。

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