[英]React map over the array object
I'm quite new with react stuff, what I am trying is to generate some dynamic stuff using.map()我对反应的东西很陌生,我正在尝试使用.map() 生成一些动态的东西
This is my component:这是我的组件:
import React, { Component } from "react";
class DynamicStuff extends Component {
state = {
options: [
{ id: 1, optionOne: "OptionOne" },
{ id: 2, optionTwo: "OptionTwo" },
{ id: 3, optionThree: "OptionThree" }
]
};
render() {
const options = [...this.state.options];
return (
<>
{options.map((option) => {
return {option}
})}
<span>{options.optionOne}</span>
<span>{options.optionTwo}</span>
<span>{options.optionThree}</span>
</>
);
}
}
export default DynamicStuff;
What I am doing wrong here and why the map is not generating expected result?我在这里做错了什么以及为什么 map 没有产生预期的结果?
Is it ok?可以吗?
import React, { Component } from "react";
class DynamicStuff extends Component {
state = {
options: [
{ id: 1, value: "OptionOne" },
{ id: 2, value: "OptionTwo" },
{ id: 3, value: "OptionThree" }
]
};
render() {
const options = [...this.state.options];
return (
<>
{options.map((option) => {
return <span>{option.value}</span>
})}
</>
);
}
}
export default DynamicStuff;
You have made your options object incorrectly.您错误地选择了 object。 We need to have a same attribute over all the objects in the array.
我们需要对数组中的所有对象具有相同的属性。
class App extends React.Component {
state = {
options: [
{ id: 1, option: "OptionOne" },
{ id: 2, option: "OptionTwo" },
{ id: 3, option: "OptionThree" }
]
};
render() {
const options = [...this.state.options];
return (
<>
{options.map((option, index) => (
<li key={index}>{option.option}</li>
))}
</>
);
}
}
Another thing, If you need to map an array.另一件事,如果你需要 map 一个数组。 You don't need to have many spans.
你不需要有很多跨度。 Having a one is just enough.
有一个就够了。 The map function will iterate and give you all the things.
map function 将迭代并为您提供所有内容。
The map used here is actually to convert the js object into a react element, but your usage here is still a js object after the map conversion.这里使用的map其实是把js object转换成react元素,但是你这里的用法还是Z1D78DC8ED5124E9AE9AEZ5转换后的js object。 The react element may be a
<p key = {option.id}> {option. optionOne} </p>
反应元素可能是
<p key = {option.id}> {option. optionOne} </p>
<p key = {option.id}> {option. optionOne} </p>
. <p key = {option.id}> {option. optionOne} </p>
。 If there is a react element after the return in your map, it is correct.如果您的 map 中返回后有反应元素,则正确。
{options.map((option) => {
return <p key = {option.id}> {option. optionOne} </p>
})}
or或者
{options.map((option) => <p key = {option.id}> {option. optionOne} </p>)}
YOu need to map and return the HTML element您需要 map 并返回 HTML 元素
return ({ options.map((option) => { return `<span key={option.id}>${option. option}</span>` }) });
You should do something like你应该做类似的事情
render() {
const { options } = this.state;
return (
<div className="option-wrapper">
{options.length > 0 && options.map(option => {
return <span key={option.id}>{option.option}</span>
})}
</div>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.