ReactJS 为数组上的每个值渲染表答案

【问题标题】：ReactJS Render Table for each value on ArrayReactJS 为数组上的每个值渲染表
【发布时间】：2018-10-30 21:42:34
【问题描述】：

我有一个 MultiSelect 和一个 React Table.. Select 将值存储到 value Array..

现在我可以选择一个选项并且表格正确显示数据。但是，我希望为每个选定的选项呈现一个表格。我怎样才能实现这样的目标？

 handleSelectChange (value) {
   console.log('You\'ve selected:', value);
   this.setState({ value: value }, () => this.fetchTable());
 }
      
      
 fetchTable() {
   const url = 'http://localhost:8000/issues/from/';
   const value = this.state.value;
   const string = url+value;
   fetch(string)
   .then(function(response) {
     return response.json();
   })
   .then((myJson) => this.setState({data: myJson.issues}));
 }
 
 componentDidMount() {
   this.fetchData();
 }
 
 
 render() {
 
 const filteredResult = this.state.boards.map(item => (
       {
          value: item.key,
          label: item.name, 
    }
  ));
      
 const filteredResult1 = this.state.data.map(item => (
        {
          name: item.fields,
          id: item.id, 
          key: item.key,
   }
 ));
 
     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}
      />
      <ResponseTable data={filteredResult1} />
      </div>  

      
    );
  }
}

【问题讨论】：

你尝试了什么？哪一部分难？
你能告诉我filteredResult和filteredResult1之间的关系吗？由于filteredResult1是基于filteredResult的，这两者之间是否存在id映射。选定的选项 id 将获取过滤结果 2 的数据
@Jeeva 我使用 FilteredResult 来“过滤”数据，（ FilteredResult ）用于选择，（ FilteredResult1 ）用于表。由于我从 FetchTable 获得的数据非常庞大，我只需要几个值！
是的，如果我错了，请纠正我，filteredResult1（数据）是基于filteredResult（选择选项）的权利。根据过滤结果中的 id，您正在获取作为过滤结果 1 的数据。对吗？
@TMG ，我不确定如何实现它，我必须为每个值创建一个 fetchTable，然后来自 fetch 的数据必须以不同的状态保存？像数据1，数据2？然后我也不知道如何为每个值呈现表格..

标签： reactjs

【解决方案1】：

您的 ResponseTable 组件看起来如何？我想你可以只使用 map 函数来循环和显示表格行。像这样的：

const data = [{name: 'Test 1', id: 1, key: 'key_1'}, {name: 'Test 2', id: 2, key: 'key_2'}, {name: 'Test 3', id: 3, key: 'key_3'}];

_renderTableBody = () => {
   return data.map((item) => (
       return (
           <TableRow>
             <TableCell>item.name</TableCell>
             <TableCell>item.id</TableCell>
             <TableCell>item.key</TableCell>
           </TableRow>
       )
   ))
}

然后在你的渲染函数中，你可以替换它

<ResponseTable data={filteredResult1} />

进入如下代码：

{this._renderTableHead()}  // same method as _renderTableBody() to generate the table head title
{this._renderTableBody()}

希望这能有所帮助！

【讨论】：

这是我的 React 表组件，jsfiddle.net/snt8qket。该表可以正常显示数据，但我需要渲染多个表。如果我的数据数组有 2 个值，例如 [Elvis,Mike]，那么它将获取 Elvis 和 Mike 的值，并渲染 2 个表。
如果你想循环遍历数据数组并渲染多个表，你可以包装一个映射函数来渲染表，通过将值作为参数传递到数据数组中，你可以检查一下：stackoverflow.com/questions/47616355/react-foreach-in-jsx

【解决方案2】：

只需将一些虚拟键保持在最初为空数组的状态。它将选择选项的选定值推入其中。如下所示

constructor(props){
  this.state = {
    selectedValues: []
  }
}

如下所示更改您的 handleSelectChange。它需要更新这个数组中当前选择的值

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

   let currentSelectedValue = this.state.selectedValues.filter(selected => selected == value)  
   //it will return a value if it is found otherwise empty array will be returned

   if(currentSelectedValue.length == 0){
     let updatedSelectedValue = this.state.selectedValues.push(value)
     this.setState({ selectedValues: updatedSelectedValues }, () => this.fetchTable());
   }
 }

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

  let currentSelectedValue = this.state.selectedValues.filter(selected => selected !== value)  //this will delete the removed option from array           

  this.setState({ selectedValues: currentSelectedValue }, () => this.fetchTable());
 }


fetchTable() {
   if( this.state.selectedValues.length > 0 ){
     this.state.selectedValues.map((value)=>{
       const url = 'http://localhost:8000/issues/from/';
       const string = url+value;
       fetch(string)
       .then(function(response) {
         return response.json();
       })
       .then((myJson) => this.setState({data: [...this.state.data, myJson.issues]})); //use spread operator to combine the result of each selectedValue
     });     
   }
 }

render() {

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

 const filteredResult1 = this.state.data.map(item => (
   {
     name: item.fields,
     id: item.id, 
     key: item.key,
   }
 ));

     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}
      />

      this.state.data.map((item) => {   // item here will hold the json object of { id: item.id, key: item.key, name: item.fields } 
        <ResponseTable data={item} />
      })

      </div>
    );
  }
}

【讨论】：