Css 如何在react中使用两个api url

反应

正如你们所看到的，在react代码中，我试图使用两个API，但我很难在react中做到我想要的，如果我传递两个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"));

Html

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

---

继续评论

您的代码很好，可以使用代码创建发送的输出图像。我会解释的。 您的代码所做的是：

调用Axios API以从API获取所有数据

将API调用中的数据设置为状态“post”

映射每个帖子并将数据作为道具“项目”传递

---

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

评论不用于扩展讨论；这段对话已经结束。在上面的代码中，我正在尝试使用react项目，但不工作。任何人都可以帮助我。嗨，soni，查看聊天。我已经回答了你的问题

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

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