如何从项目数组输出项目在JSX ?

Question

我有一个类似的小数组

const arr = [{ "0": "First Item", "1": "Second Item", "2": "Third Item"}]

我想在JSX中输出。

这是我有https://codesandbox.io/s/focused-bose-wgmbny?file=/src/App.js。如您所见，它只输出数组的第一个元素。

我试过使用forEach和for循环，但无济于事。(开发者告诉我JSX应该使用。map)

我也试过这个:

arr.map((item, index) => (
<p>{item[index]}</p>
))

我只想让映射输出:

"第一Item"第二Item"第三Item">

但是它只停在"First Item">

Answer 1

你必须考虑多个方面

1. 你的数组包含一个对象，所以数组的长度是1，并且只迭代一次。
2. 在你的数组中，你有一个对象，访问item[index]获取对象的第一个索引，因此得到结果。要修复这个

方法1

return (
<div className="App">
{testArry.map((item, index) => {
const obj = Object.values(item).map(item1 => item1)
return obj;
})}
</div>
);

方法2

const testArry = ["First Iteam", "Second Item", "Third Item"];
return (
<div className="App">
{testArry.map((item, index) => {
return item
})}
</div>
);
}

Answer 2

在你的示例数组中只有一个对象

然后循环使用

和map只循环一次。它将返回你的对象;

您的项目{"0": "第一项"， "1";第二项"， "2"; "第三项"}

;和索引总是0因为它只循环一次。

使用item[index]

表示你的项目在

上面和项(指数)仅表示对象的键

const arr = [{ "0": "First Item", "1": "Second Item", "2": "Third Item"}];
// here is in your array only have 1 element
//{ "0": "First Item", "1": "Second Item", "2": "Third Item"}
// and if you console it you will see that item is
// { "0": "First Item", "1": "Second Item", "2": "Third Item"}

console.log(arr[0]);
console.log(arr[0][0]);
arr.map((item, index) => {
console.log(item[index]);
console.log(item);
});
// so you should do
const arr1 = [{ "0": "First Item"}, {"1": "Second Item"}, {"2": "Third Item"}];
arr1.map((item, index) => {
console.log(item[index]);
console.log(item);
});

Answer 3

const arr = [{ "0": "First Item", "1": "Second Item", "2": "Third Item"}]

是一个以单个对象为元素的数组。当您在arr上使用map函数时，如下所示:

arr.map((item, index) => item[index])

它迭代arr中的元素，对于每个元素(在这种情况下是单个对象)，它返回键为index的属性(这是当前map迭代的索引)。所以实际上你在这里调用了arr[0][0]。

正确的数组应该是:

const arr = ["First Item", "Second Item", "Third Item"];

然后你可以打印每一项:

return (
<div className="App">{arr.map((item) => item)}</div>
);