React JS映射数组和解包特定值

Question

我正在尝试映射对象数组中的特定值。我已经从我的后端API收集了数据，这是响应：

// An array of objects
console.log(response.data) = 
[
{name:"Bryan",age:"25",sport:"basketball"},
{name:"Justin",age:"30",sport:"soccer"},
{name:"Mark",age:"28",sport:"basketball"},
{name:"Cowell",age:"27",sport:"soccer"},
]

我使用"数据"将该数据置于一种状态("数据"(；useState(("来自React，并在渲染时使用useEffect对数据进行解包。

const [data, setData] = useState([])
// some function to store response.data in state
setData(response.data)

我想以以下方式将这些值映射到我的浏览器上，以便足球运动员显示在第一个div中，篮球运动员显示在第二个div中：(尝试了几种方法，但它们导致了解析错误(

function App() {
const [data, showData] = useState([])
return (
<div>
{data.map(info => {
<div>
<h1> Sport: soccer </h1> 
<h5> {info.name} </h5>
</div>
<div>
<h1> Sport: basketball</h1> 
<h5> {info.name} </h5>
</div>
}
)}
</div>
)
}

我试图将名称分组在同一个div块(同一项运动(中，而不是为每个运动分配两个不同的div块。

Answer 1

您需要从map函数返回元素，并删除硬编码篮球的部分。

{data.map((info, idx) => (
<div key={idx}>
<h1> Sport: {info.sport} </h1>
<h5> {info.name} </h5>
</div>
))}

const groupBy = (array, getGroupByKey) => {
return (
(array &&
array.reduce((grouped, obj) => {
const groupByKey = getGroupByKey(obj);
if (!grouped[groupByKey]) {
grouped[groupByKey] = [];
}
grouped[groupByKey].push(obj);
return grouped;
}, {})) ||
{}
);
};
const App = (props) => {
var [data, setData] = React.useState([
{ name: 'Bryan', age: '25', sport: 'basketball' },
{ name: 'Justin', age: '30', sport: 'soccer' },
{ name: 'Mark', age: '28', sport: 'basketball' },
{ name: 'Cowell', age: '27', sport: 'soccer' },
]);
const players = groupBy(data, (player) => player.sport);
const sportKeys = Object.keys(players);

return (
<div>
{sportKeys.map((info, idx) => (
<div key={idx}>
<h1> Sport: {info} </h1>
{players[info].map((player, i) => (
<h5 key={i}>{player.name}</h5>
))}
</div>
))}
</div>
);
};
ReactDOM.render(<App />, document.getElementById('root'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>