Javascript 在数组对象上进行反应贴图

我对react是个新手，我正在尝试使用.map（）生成一些动态的东西

这是我的组件：

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;

import React，{Component}来自“React”；
类DynamicStuff扩展组件{
状态={
选项：[
{id:1，optionOne:“optionOne”}，
{id:2，optionTwo:“optionTwo”}，
{id:3，optionTree:“optionTree”}
]
};
render（）{
const options=[…this.state.options]；
返回(
{options.map（（option）=>{
返回{option}
})}
{options.optionOne}
{options.optionTwo}
{options.optionTree}
);
}
}
导出默认的DynamicStuff；

我在这里做错了什么，为什么地图没有生成预期的结果？

可以吗

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;

import React，{Component}来自“React”；
类DynamicStuff扩展组件{
状态={
选项：[
{id:1，值：“OptionOne”}，
{id:2，值：“OptionTwo”}，
{id:3，值：“optionTree”}
]
};
render（）{
const options=[…this.state.options]；
返回(
{options.map（（option）=>{
返回{option.value}
})}
);
}
}
导出默认的DynamicStuff；

您将选项对象设置得不正确。我们需要对数组中的所有对象具有相同的属性

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>
       ))}
      </>
    );
 }
}

类应用程序扩展了React.Component{
状态={
选项：[
{id:1，选项：“OptionOne”}，
{id:2，选项：“OptionTwo”}，
{id:3，选项：“optionTree”}
]
};
render（）{
const options=[…this.state.options]；
返回(
{options.map（（选项，索引）=>(
{option.option}
))}
);
}
}

---

另一件事，如果你需要映射一个数组。你不需要有很多跨度。有一个就足够了。map函数将迭代并为您提供所有信息。

此处使用的map实际上是将js对象转换为react元素，但在map转换后，您在此处的用法仍然是js对象。react元素可以是

{option.optionOne}

。 如果地图中返回后有react元素，则该元素是正确的

{options.map((option) => {
  return <p key = {option.id}> {option. optionOne} </p>
})}

{options.map（（option）=>{
return
{option.optionOne}
})}

或

{options.map（（option）=>
{option.optionOne}
）}

您需要映射并返回HTML元素

返回({
options.map（（选项）=>{
返回`${option.option}`
})
});您应该执行以下操作

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>
    );
}

render（）{
const{options}=this.state；
返回(
{options.length>0&&options.map（选项=>{
返回{option.option}
})}
);
}
通常，数组中的对象具有相同的键，但在这里它们是optionOne、optionTwo、optionTree。你确定对象是正确的吗？你的span应该被包装在map方法中，当它每次循环时，每个带有{option.value}的span都会显示出来。因为只有一个参数和一行要返回，你可以进一步将arrow函数简化为
options.map（option=>（{option.value}））
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>
    );
}