映射从 React 中的 Express 服务器获取的 JavaScript 对象

Question

我在一个对象内部有多个数组，用于不同类型的微量营养素(维生素、矿物质、抗氧化剂、氨基酸和欧米茄(。我希望每个人都在自己的下拉菜单中作为<option>传递，该下拉菜单显示自己的类型(例如维生素：维生素 B2、B6、B5 等(

我的控制台显示已成功获取数据：

{vitamins: Array(6), minerals: Array(2), aminoacids: Array(1), antioxidants: Array(2), omegas: Array(1)}

但是当我到达维生素.js时，我正在尝试渲染该选项，它说"TypeError：vitamins.map 不是一个函数"。

这是我来自我的Express服务器的res.json：

router.get('/', function(req, res, next) {
res.json({vitamins: [
{
name: "Vitamin B2"
},
{
name: "Vitamin B6"
}, 
{
name: "Vitamin B5"
}
],
minerals: [
{
name: "Calcium"
},
{
name: "Zinc"
}
] 
});
});

这是在Home.js中为res.json声明状态的地方。(我知道"用户"现在没有任何语义意义，我会改变它。只是想弄清楚为什么它不首先工作。

constructor(props) {
super(props);
this.state = {users: []};
}
componentDidMount() {
fetch('/users')
.then(res => res.json())
.then(users => this.setState({ users }));
}
render() {
return (
<MenuItems users={this.state.users} />
)
}

这是 Menuitems.js，比 Home.js 低一级，我在其中调用 handleChange 函数，因此当用户单击新的微(维生素 B2 -> B6(时，新的微 (B6( 成为新的选定选项。

constructor(props) {
super(props);
this.state = {
value: '',
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
const { value } = e.target;
this.setState({
value: value
});
}
render() {
return (
<ul className="menuitems">
<li>
<Vitamins data={this.props.users} />
</li>
<li>
<Minerals data={this.props.users} />
</li>
</ul>
)
}

这是维生素.js(我也有矿物质.js、氨基酸.js等(，我试图在我的 res.json 对象中的"维生素"数组上映射，并在选择下拉列表中拉取每个名称。

renderData() {
const vitamins = this.props.data;
console.log("the data", vitamins);
return vitamins.map((micro, index) => {
return (
<option value={micro.value} key={index}>{micro.name}</option>
)
})
}
render() {
return (
<form>
<select value={this.props.value} onChange={this.handleChange}>
<option value="" selected>--Vitamins--</option>
{this.renderData()}
</select>
</form>
)
}

渲染数据(( 中的控制台.log起初不会显示任何内容，但在 componentDidMount(( 之后它会显示两次

the data {vitamins: Array(6), minerals: Array(2), aminoacids: Array(1), antioxidants: Array(2), omegas: Array(1)}

编辑

我接受了我得到的一些建议，并尝试应用它。

这个有效，我在每个子组件(维生素、矿物质等(内部声明状态。

state = {users: []};
componentDidMount() {
fetch('/users')
.then(res => res.json())
.then(users => {
this.setState({
users: users.vitamins
});
})
}
renderData() {
const vitamins = this.state.users;
return vitamins.map((micro, index) => {
return (
<option value={micro.value} key={index}>{micro.name}</option>
)
})
}

但是，我不想继续在每个组件中获取。我尝试在父菜单项中声明状态，并按照建议在数据属性中传递{this.state.users.vitamins}。

(MenuItems.js)
state = {users: []};
componentDidMount() {
fetch('/users')
.then(res => res.json())
.then(users => {
this.setState({
users
});
})
}
render() {
return (
<ul className="menuitems">
<li>
<Vitamins data={this.state.users.vitamins} />
</li>
</ul>
)
}
(Vitamins.js)
renderData() {
const vitamins = this.props.data;
return vitamins.map((micro, index) => {
return (
<option value={micro.value} key={index}>{micro.name}</option>
)
})
}

但是，当我这样做时，我得到"类型错误：无法读取未定义的属性'映射'"。

如果我做"const { vitamins } = this.props.data"，我会得到"TypeError：无法读取未定义的属性'维生素'"。

那么如何在父级别获取，并将我需要的唯一数组传递给 data= ？

Answer 1

您当前仅获取用户。在维生素中.js您尝试从 this.props.data 获取数据，这将为您提供正在处理数组的信息，如控制台日志所示。您需要先"拆分"数据，然后才能获取数据。

this.setState({ users: users.vitamins)} 

例如(我不知道你的生态系统，所以你试图获取的任何内容都需要在 setState 事件中关联，否则你只是在没有数据定义的情况下传递数据(。

正如评论部分已经发布的那样，您也可以在将数据传递给组件时尝试拆分它：

<Vitamins data={this.props.users.vitamins}

它基本上是一样的，你拿用户并获取维生素数据。每当你想要映射一个数组时，你必须"打开"它。

这是一个基本示例，您通常如何操作：

.then(response => response.json())
.then(data => data.users.your-data-you-want-to-fetch.map((x) => {
this.setState({
vitamin: x.name,
id: x.id,
})

}((

然后，您的道具数据可以访问 data.Vitamin/data.id。

问候！