如何在引导程序中制作点击按钮，所有数据都来自 API

Question

反应
如果你可以看到下面的代码，当我点击真按钮或假按钮时，我会尝试制作，然后根据点击数据更改，所有数据都来自 API

_filterByLaunch = launch => {
    const post = this.state.allPosts.filter(item =>
    item.launch_success === launch
    );
    this.setState({ post });
    }

你可以在这里看到 API URL https://api.spaceXdata.com/v3/launches?limit=100&launch_success=true

Demo

Answer 1

调用 _filterByLaunch 时，传递布尔类型 true 和 false 而不是字符串 'true' 和 'false'。响应中的数据类型是布尔类型。

launch_success: true //NOT launch_success: 'true'

所以使用_filterByLaunch(true)，而不是_filterByLaunch('true')

    <button class="btn btn-success"  onClick={() => this._filterByLaunch(true)}>true</button>
  <button class="btn btn-success"  onClick={() => this._filterByLaunch(false)}>false</button>