ReactJS：如何根据Select选中值更新表格组件并重新渲染

这问题其实很典型，核心就是利用React的state-props数据流来触发组件更新，我给你一步步拆解怎么做：

1. 在Select的 onChange 事件中更新父组件的state #

你已经能拿到选中的ID了，现在只需要把这个值同步到组件的state里，这样当state变化时，传递给Table的props也会跟着变。

假设你的父组件是类组件，代码可以这样写：

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 23 // 初始值
    };
    // 如果不用箭头函数，需要在这里绑定方法
    // this.handleSelectChange = this.handleSelectChange.bind(this);
  }

  // 用箭头函数自动绑定this，不用在constructor里处理
  handleSelectChange = (event) => {
    const selectedId = event.target.value;
    console.log('选中的ID:', selectedId);
    // 更新state，这会触发组件重新渲染
    this.setState({ value: selectedId });
  }

  render() {
    return (
      <div>
        <Select
          value={this.state.value}
          onChange={this.handleSelectChange}
        >
          {/* 这里放你的Select选项，比如： */}
          <option value="23">ID 23</option>
          <option value="24">ID 24</option>
          <option value="25">ID 25</option>
        </Select>
        {/* 把更新后的state.value传给Table */}
        <Table value={this.state.value} />
      </div>
    );
  }
}

2. 让Table组件响应props变化，重新请求数据 #

Table组件接收到新的value props后，需要重新发起API请求获取对应的数据，并更新自身的渲染内容。这里分两种组件类型来说：

类组件版本的Table #

用componentDidMount做初始请求，componentDidUpdate监听props变化：

class Table extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tableData: []
    };
  }

  componentDidMount() {
    // 组件挂载时请求初始数据
    this.fetchTableData(this.props.value);
  }

  componentDidUpdate(prevProps) {
    // 只有当value变化时，才重新请求数据
    if (prevProps.value !== this.props.value) {
      this.fetchTableData(this.props.value);
    }
  }

  fetchTableData = (id) => {
    fetch(`http://.../${id}`)
      .then(response => response.json())
      .then(data => {
        // 更新Table的state来渲染新数据
        this.setState({ tableData: data });
      })
      .catch(error => {
        console.error('数据请求失败:', error);
      });
  }

  render() {
    const { tableData } = this.state;
    return (
      <table>
        <thead>
          {/* 表头内容 */}
        </thead>
        <tbody>
          {tableData.map(item => (
            <tr key={item.id}>
              {/* 渲染每一行数据 */}
              <td>{item.name}</td>
              <td>{item.value}</td>
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
}

函数组件版本的Table #

用useEffect钩子监听value变化，自动触发数据请求：

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

function Table({ value }) {
  const [tableData, setTableData] = useState([]);

  useEffect(() => {
    // 定义异步请求函数
    const fetchTableData = async () => {
      try {
        const response = await fetch(`http://.../${value}`);
        const data = await response.json();
        setTableData(data);
      } catch (error) {
        console.error('数据请求失败:', error);
      }
    };

    // 调用请求函数
    fetchTableData();
  }, [value]); // 依赖项：当value变化时重新执行Effect

  return (
    <table>
      <thead>
        {/* 表头内容 */}
      </thead>
      <tbody>
        {tableData.map(item => (
          <tr key={item.id}>
            <td>{item.name}</td>
            <td>{item.value}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

核心逻辑总结 #

1. 父组件通过setState更新选中的ID，触发自身重新渲染
2. Table组件接收到新的value props
3. Table组件监听props变化，重新请求对应ID的数据并更新自身状态
4. Table根据新状态渲染最新数据

这样切换Select选项时，表格就会自动更新啦！

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