reactjs - 组件未将数据推入数组
问题描述
我为我的项目创建了一个组件,并且出于某种原因,在将数据推送到数组时数据没有更新。它只推它一次,它只做最后一个对象。它不会停止循环或跳到最后,所以我不知道是什么原因造成的。格式是正确的,但数据根本不会推入数组。
这是我的组件 https://codesandbox.io/s/stoic-bartik-bh9rc
class Organization extends Component {
render () {
const team = (props) => {
let arr = [];
props.props.map((res, key) => {
let teamName = res.team.replace(/\s+/g, '_').toLowerCase();
if (Object.keys(arr) !== teamName) {
arr[teamName] = {};
arr[teamName]['section_title'] = res.team;
}
arr[teamName]['fields'] = res
});
return arr;
}
return (
<div className="press-wrapper">
<Cards data={team(this.props)} multiple={true} />
</div>
)
}
}
这是当前输出
{
co_founder: {
section_title: 'Co Founder',
fields: [
{ title: "Cl Tre, Co-Founder & COO", team: "Co Founder" },
]
}
},
{
team_member: {
section_title: 'Team Member',
fields: [
{ title: "Team Member", team: "Team Member" },
]
}
},
{
advisor: {
section_title: 'Advisor',
fields: [
{ title: "Team Member", team: "Advisor" },
]
}
}
这是我想要的输出
{
co_founder: {
section_title: 'Co Founder',
fields: [
{ title: "Ja Ris, Co-Founder & CEO", team: "Co Founder" },
{ title: "Cl Tre, Co-Founder & COO", team: "Co Founder" },
]
}
},
{
team_member: {
section_title: 'Team Member',
fields: [
{ title: "Team Member", team: "Team Member" },
{ title: "Team Member", team: "Team Member" },
{ title: "Team Member", team: "Team Member" },
{ title: "Team Member", team: "Team Member" },
{ title: "Team Member", team: "Team Member" },
{ title: "Team Member", team: "Team Member" },
]
}
},
{
advisor: {
section_title: 'Advisor',
fields: [
{ title: "Team Member", team: "Advisor" },
{ title: "Team Member", team: "Advisor" },
{ title: "Team Member", team: "Advisor" },
{ title: "Team Member", team: "Advisor" },
{ title: "Team Member", team: "Advisor" },
{ title: "Team Member", team: "Advisor" },
]
}
},
解决方案
尝试使用缩减来构建基于props
. 这样的事情应该有助于获得您想要的输出:
props.reduce((acc, curr) => {
let teamName = curr.team.replace(/\s+/g, '_').toLowerCase();
if (!acc[teamName]) {
acc[teamName] = {};
acc[teamName].section_title = curr.team;
acc[teamName].fields = [curr.title];
}
else {
acc[teamName].fields.push(curr.title);
}
return acc;
}, {})
推荐阅读
- sql - 从通用查询访问客户属性
- node.js - 在数组中的对象中按日期搜索
- powershell - 比较 2 个数组并保留相似的列
- vba - VBA根据用户输入以语法方式更改查询SQL
- react-native - 如何在 react-native 中将视频上传到 vimeo?
- linux - 如何使用 printf "%.2f\n" 更改 linux 中所有列的小数位数
- python - 使用python和漂亮的汤从html表中提取数据
- forms - Redux 表单 -> 自动对焦第一个输入
- c# - 通过 IBM.Data.DB2 的 Z/OS DB2
- string - 在文件中查找字符串然后删除