Noob做出反应，以及与网络开发有关的所有事情 . 我正在尝试在Navbar中创建一个列表，其中包含将用户重定向到新页面的按钮 . 我从JSON文件中获取运动，我有下面的代码来减少/摆脱所有重复项 . 我现在的问题是创建列表的最佳做法，例如带有按钮的导航栏，每个按钮可以获得一项运动 . 我在总共有5项运动，我不知道如何将它们从SportList.js文件中分离出来 . 我的目标是以某种方式将它们附加到图标（如足球足球），将用户发送到足球页面（在那里你可以看到所有足球比赛） . 不确定从哪里开始 .
我希望我的问题不是混淆，英语不是我的第一语言 . 任何帮助和/或提示都很棒 . 问我是否没有意义，我会尝试重新解释这个问题 . 谢谢！
import React, { Component } from 'react'
import axios from 'axios'
class SportList extends Component {
state = {
posts: []
}
componentDidMount(){
axios.get('https://data.json')
.then(res => {
this.setState({
posts: res.data
});
})
}
render() {
const { posts } = this.state;
const uniquePosts = Object.values(posts.reduce((r,c) => {
r[c.sport] = c
return r
}, {}))
const postList = uniquePosts.length ? (
uniquePosts.map(post => {
return (
<div key={post.id}>
<div>
{post.sport}
</div>
</div>
)
})
) : (<div>No Sports Available</div>)
return (<div>{postList}</div>);
}
}
export default SportList
1 回答
你需要安装两个包react-router-dom和lodash .
在api调用之后，一旦获得数据 . 获取运动名称，为运动创建每个组件 . 将数据传递给每个组件 .
Note ： Since i don't have the api, i have used to get it from a file, so you can call the api in the componentDidMount and set the data to state.
还可以使用Route组件来根据每个组件负载呈现数据 .
我希望这能解决问题 . 如果发生任何问题，请告诉我 .