Question

我正在做我的第一个React项目，我正在尝试使用API数据来为我的本地海滩创建冲浪报告。

我设法获取API数据并将所有结果显示为页面上的列表，但我真正想做的是使用最新的（或第二最新的，因为最新的方向似乎是错误的）结果数据保存在变量中。

如果我想按上面提到的那样过滤数据，是否还需要获取整个列表？或者我可以只索要我需要的信息吗？

这是提取-

// Waves //

const WAPI = 'https://data.qld.gov.au/api/action/datastore_search?limit=400&resource_id=2bbef99e-9974-49b9-a316-57402b00609c&q=Mooloolaba';

class WApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      records: [],
    };
  }

  componentDidMount() {
    fetch(WAPI)
      .then(response => response.json())
      .then(data => this.setState({ records: data.result.records }));
  }

  renderRecords = () => this.state.records.map(record =>
      <li key={record._id}>
        {record.Hsig} m
        {record.Direction} direction -
        {record.DateTime}
      </li>
  );

  render() {
    const { records } = this.state;

    return (
      <ul>
        {!records.length ? <p>Loading...</p> : this.renderRecords() }
      </ul>
    );
  }

}

这是我将在何处使用数据的示例

const waveDirection = 149.1;

const direction =
  wDirection > 0 && waveDirection <= 5 ? 'North' : 'Other';

Answer 1

如果我想将数据过滤为以下内容，也需要获取整个列表我已经在上面提到过，或者我可以只索要我需要的东西吗？

取决于您使用的API，某些API允许您指定参数并请求某些信息。但是，如果没有，您将需要请求所有数据，然后对其进行过滤。如果要过滤，请缓存从API获取的数据。

要访问最后2个结果，您可以使用this.state.records.slice(-2)

Answer 2

恭喜您首次参与React项目。

我认为您可以通过两种方式解决该问题。 1.请求后端api返回最新的api。我不了解该api的详细信息，因此我无法确认它是否支持这种东西，但我认为这将是正常且通用的方法。 2.从前端排序并获取结果。

let latestRecord = data.result.records.sort(
      (a, b) => moment(b.DateTime) - moment(a.DateTime)
    )[0];

此致

如何将API的单个结果用作变量

2 个答案: