如何在反应中使用两个api url

Question

反应

正如您所看到的，在反应代码中我正在尝试使用两个 API，但如果我通过两个 API url 然后输入输出所有两个值，我正在努力做我想要的反应。但仅在输出中没有发生任何事情我得到第一个 API 输出，但我想要两个 API 输出

URL = "https://api.spacexdata.com/v3/launches?limit=10"; // URL variable stores JSON url || API taken 
from 10 Degrees WordPress Agency
URL = "https://api.spaceXdata.com/v3/launches?limit=100&launch_success=true";
class App extends React.Component {
    state = {
        post: [],
        allPosts: []
    };
componentDidMount() {
        axios
            .get(URL, {
                headers: {
                    Accept: "application/json",
                    "Content-Type": "application/json"
                }
            })
            .then(({ data }) => {
                this.setState({
                    post: data,
                    allPosts: data // array data from JSON stored in these
                });
            })
            .catch(err => {});
    }

    _onKeyUp = e => {
        // filter post list by title using onKeyUp function
        const post = this.state.allPosts.filter(item =>
            item.mission_name.toLowerCase().includes(e.target.value.toLowerCase())
        );
        this.setState({ post });
    };

    render() {
        return (
            <div className="container">
                <div className="search-outer">
                    <form
                        role="search"
                        method="get"
                        id="searchform"
                        className="searchform"
                        action=""
                    >
                        {/* input field activates onKeyUp function on state change */}
                        <input
                            type="search"
                            onChange={this._onKeyUp}
                            name="s"
                            id="s"
                            placeholder="Search"
                        />
                        <button type="submit" id="searchsubmit">
                            <i className="fa fa-search" aria-hidden="true" />
                        </button>
                    </form>
                </div>
                <ul className="data-list">
                    {/* post items mapped in a list linked to onKeyUp function */}
                    {this.state.post.map((item, index) => (
                        <li className={"block-" + index}>
                            <div className="title">
                                <h3>{item.mission_name}</h3>
                            </div>
                        </li>
                    ))}
                </ul>
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById("root"));

css

$white: #ffffff;
$grey: #dadbdb;

*,
*:before,
*:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: url(https://i.pinimg.com/originals/6d/72/ec/6d72ec208bf85647d5e594db79218802.jpg)
        center center;
    background-attachment: fixed;
    background-size: cover;
    color: $white;
    font-family: "Open Sans";
    height: 100%;
    width: 100%;

    input,
    textarea {
        border: 1px solid transparent;
        border-radius: 3px;
    }
}

#root {
    .container {
        margin: 0 auto;
        max-width: 1000px;
    }

    .search-outer {
        margin: 50px 0 35px;
        text-align: center;

        .searchform {
            display: inline-block;
            position: relative;
            left: 0;
            right: 0;

            input {
                outline: medium none;
            }

            input[type="search"] {
                background-color: transparent;
                border: medium none;
                border-width: 0 0 1px 0;
                border-style: solid;
                border-color: $grey;
                border-radius: 0;
                box-sizing: content-box;
                color: $white;
                cursor: pointer;
                font-family: inherit;
                font-size: 100%;
                margin-bottom: 0;
                padding: 3px 0;
                transition: all 0.5s ease 0s;
                max-width: 300px;
                width: calc(100% - 15px);
                -webkit-appearance: none;
                -moz-appearance: none;

                &::-webkit-search-decoration {
                    -webkit-appearance: none;
                }

                /* clears the 'X' from Internet Explorer */
                &::-ms-clear {
                    display: none;
                    width: 0;
                    height: 0;
                }

                &::-ms-reveal {
                    display: none;
                    width: 0;
                    height: 0;
                }

                /* clears the 'X' */
                &::-webkit-search-decoration,
                &::-webkit-search-cancel-button,
                &::-webkit-search-results-button,
                &::-webkit-search-results-decoration {
                    display: none;
                }

                &:focus {
                    background-color: transparent;
                    color: #fff;
                    cursor: auto;
                    padding: 3px 0;
                }
            }

            &:hover input[type="search"] {
                background-color: transparent;
                color: $white;
                cursor: auto;
                padding: 3px 0;
            }
        }

        button[type="submit"] {
            background-color: rgba(0, 0, 0, 0);
            border: medium none;
            color: #fff;
            cursor: pointer;
            height: 30px;
            line-height: 1;
            float: right;
            font-size: 1em;
            pointer-events: none;
            width: auto;
            z-index: 1000000000;
        }

        .fa-search {
            padding-left: 0;
            padding-right: 0;
        }
    }
}

::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: rgba(255, 255, 255, 0.5);
}

::-moz-placeholder {
    /* Firefox 19+ */
    color: rgba(255, 255, 255, 0.5);
}

:-ms-input-placeholder {
    /* IE 10+ */
    color: rgba(255, 255, 255, 0.5);
}

:-moz-placeholder {
    /* Firefox 18- */
    color: rgba(255, 255, 255, 0.5);
}

.data-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style: none;
    padding: 0 15px;

    &:after {
        content: "";
    }

    &:after,
    li {
        width: calc(33.33% - 10px);
    }

    li {
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-bottom: 15px;
        padding: 30px;

        .title {
            color: $white;
            margin-bottom: 30px;
            text-decoration: none;
        }

        .link {
            color: $white;
            text-decoration: none;
        }
    }
}

@media only screen and (max-width: 768px) {
    .data-list {
        &:after,
        li {
            width: calc(50% - 8px);
        }
    }
}

@media only screen and (max-width: 400px) {
    .data-list {
        &:after,
        li {
            width: 100%;
        }
    }
}

HTML

<div id="root"></div>

我想我在这里遗漏了一些东西

const post = this.state.allPosts.filter(item =>
            item.mission_name.toLowerCase().includes(e.target.value.toLowerCase())
        );
        this.setState({ post });
    };

Answer 1

从 cmets 继续。

您的代码很好，您可以使用您的代码创建您发送的输出图像。我会解释。 你的代码在做什么是这样的：

1. 调用 Axios API 从 API 获取所有数据
2. 将 API 调用中的数据设置为状态“发布”
3. 映射每个帖子并将数据作为道具“项目”传递

这意味着所有数据都可以从“项目”访问。通过使用“item.mission_name”来显示任务名称，您走在了正确的道路上。在我的 codepen 链接中，我向您展示了如何显示发布年份。您可以对要显示的所有数据执行相同的操作。那有意义吗？如果您感到困惑，我可以编辑 codepen 以提供更多帮助