ReactJS 过滤 API 数据答案

【问题标题】：ReactJS filter API dataReactJS 过滤 API 数据
【发布时间】：2018-05-04 09:04:57
【问题描述】：

所以我使用 API 来获取对象数组，每个对象都有很多数据，我想过滤这些数据以获取我需要的数据，以便将其显示在 React-Table 上。

export default class Table extends React.Component {
  constructor(props){
    super(props);
    this.state = {
    }
  }

  fetchData() {
  const string = 'http://localhost:8000/issues/assigned/mike';
  fetch(string)
  .then(function(response) {
    return response.json();
  })
  .then((myJson) => this.setState(myJson));
  console.log(this.state)
}

  componentDidMount(){
    this.fetchData();
  }

  componentDidUpdate(prevProps) {
    if (prevProps.value !== this.props.value) {
        this.fetchData()
    }
  }

render() {
    return this.state.issues? (
      <div>
        <ResponseTable data={this.state.issues} />
      </div>
    ) : (
      <div>
         Loading ...
      </div>
    );
  }
}

我从 API 接收的 JSON 文件： JSON DATA NEST

例如，只有一个对象，我收到了 50 个具有完全相同嵌套的对象，我期待提取一些属性（例如， data.issues[0].fields.timespent ）所以我可以将这些数据传递到我的反应表中并为每个“问题”创建一行

【问题讨论】：

您要过滤哪些数据？
嗨 Colin，这是我从 API 收到的数据，jsonblob.com/8e148758-4f83-11e8-9df1-01379195c3a0 例如，“问题”只有一个对象。我正在寻找过滤一些信息，例如，时间，描述......

标签： reactjs api fetch

【解决方案1】：

setState 函数不会立即更新组件，但您可以使用回调函数 setState(updater[, callback]) 在更新后立即获取您的状态。

关于数据过滤，您可以使用.map() 或.filter() 函数在响应转换为JSON 后转换或过滤您的集合。

【讨论】：

【解决方案2】：

您可以使用.filter() 方法过滤您需要的数据，并使用.map() 方法将此数据映射到适当的模型。

【讨论】：