ReactJS实现多选后为每个选项渲染独立表格的技术问询

你已经搭好了多选组件和基础表格展示的框架，只需要调整数据存储和渲染逻辑，就能实现每个选中选项对应独立表格的需求。下面是具体的修改步骤和完整代码：

1. 调整State数据结构 #

把原来单一的data状态改成对象dataMap，用来存储每个选中项对应的表格数据，通过选项的value作为键来区分不同数据集：

// 初始化State时调整
this.state = {
  value: [],
  dataMap: {}, // 键为选中项的value，值为对应表格数据
  boards: [],
  // 保留你原有其他状态
};

2. 修改数据请求逻辑 #

原来的fetchTable只处理单个值的请求，现在需要遍历所有选中的value，为每个值单独发起请求并更新dataMap：

handleSelectChange(value) {
  console.log('You\'ve selected:', value);
  this.setState({ value }, () => this.fetchTables());
}

fetchTables() {
  const baseUrl = 'http://localhost:8000/issues/from/';
  const { value } = this.state;
  
  // 遍历每个选中项，单独请求数据
  value.forEach(selectedKey => {
    fetch(`${baseUrl}${selectedKey}`)
      .then(response => response.json())
      .then(resData => {
        // 合并原有数据，更新当前选中项的表格数据
        this.setState(prevState => ({
          dataMap: {
            ...prevState.dataMap,
            [selectedKey]: resData.issues
          }
        }));
      });
  });
}

3. 批量渲染对应表格 #

在render方法里遍历选中的value数组，为每个值渲染一个ResponseTable组件，并传入对应的数据：

render() {
  const { value, dataMap, boards } = this.state;
  const filteredResult = boards.map(item => ({
    value: item.key,
    label: item.name,
  }));

  return (
    <div>
      <Select
        closeOnSelect={!stayOpen}
        disabled={disabled}
        multi
        onChange={this.handleSelectChange}
        options={filteredResult}
        placeholder="Select Assignee(s)..."
        removeSelected={this.state.removeSelected}
        rtl={this.state.rtl}
        simpleValue
        value={value}
      />
      {/* 遍历选中项，渲染每个对应的表格 */}
      {value.map(selectedKey => {
        // 数据未加载完成时不渲染表格
        if (!dataMap[selectedKey]) return null;
        
        // 格式化当前表格的数据
        const tableData = dataMap[selectedKey].map(item => ({
          name: item.fields,
          id: item.id,
          key: item.key,
        }));
        
        // 找到选项对应的名称作为表格标题
        const boardName = boards.find(b => b.key === selectedKey)?.name || selectedKey;
        
        return (
          <div key={selectedKey} style={{ margin: '24px 0' }}>
            <h3>表格：{boardName}</h3>
            <ResponseTable data={tableData} />
          </div>
        );
      })}
    </div>
  );
}

可选优化建议 #

• 添加加载状态：在请求数据时显示loading提示，避免用户等待无反馈
• 处理请求失败：捕获请求错误，显示错误提示或重试按钮
• 清理无用数据：当选项被取消选中时，从dataMap中删除对应数据，减少内存占用

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