Javascript 通过js/react中的对象数组进行映射

我需要一个

alt

字符串数组。我可以用

name

字符串映射数组，但无法让它返回“alt”。这就是我所尝试的：

const data = [
  { name: "Apple", alt: "Fruit" },
  { name: "Banana", alt: "Fruit" },
  { name: "Potatoe", alt: "Vegetable" },
  { name: "Lentil", alt: "Legume" }];

这就是错误： TypeError:无法读取未定义的属性“toUpperCase”

尝试一下：

<span>{
  data.map(
    (item, index) => <button 
      alt={item.alt.toUpperCase()} 
      key={someKeyHere}>
        {item.alt.toUpperCase()}
      </button>)
}</span>

{
data.map(
（项目、索引）=>
{item.alt.toUpperCase（）}
)
}

---

这是给你的裁判的一封信

---

我想你正在尝试创建一个按钮，请看下面

下面的代码被修改为使用键入映射函数，因为您的每个记录都是唯一的，并且在使用动态创建的组件或更改数据时，react键非常有用。设置键值将在更改后保持组件的唯一标识，它们也有助于提高性能。

 const data = [
      {id:1, name: "Apple", alt: "Fruit" },
      {id:2 ,name: "Banana", alt: "Fruit" },
      {id:3, name: "Potatoe", alt: "Vegetable" },
      {id:4, name: "Lentil", alt: "Legume" }
    ];
    function App() {
      return (
        <span>
          {data.map((item) => (
            <button key={item.id}>{item.alt.toUpperCase()}</button>
          ))}
        </span>
      );
    }

const数据=[
{id:1，名称：“苹果”，alt:“水果”}，
{id:2，名称：“香蕉”，alt:“水果”}，
{id:3，名字：“Potatoe”，alt:“蔬菜”}，
{id:4，名称：“扁豆”，alt:“豆类”}
];
函数App（）{
返回(
{data.map（（项）=>(
{item.alt.toUpperCase（）}
))}
);
}

使用此链接，它正在这里工作

---

数据是从AJAX填充的吗？您将返回

{item}

内部按钮，它是一个对象。返回

{item.name}

或

{item.alt}

item.alt

在某些地方似乎未定义这正是我需要的！但我仍然得到这个错误：TypeError:无法读取未定义的属性“toUpperCase”…嗨，Mina，你能打开codesandbox并检查一下吗。

<span>{
  data.map(
    (item, index) => <button 
      alt={item.alt.toUpperCase()} 
      key={someKeyHere}>
        {item.alt.toUpperCase()}
      </button>)
}</span>

 const data = [
      {id:1, name: "Apple", alt: "Fruit" },
      {id:2 ,name: "Banana", alt: "Fruit" },
      {id:3, name: "Potatoe", alt: "Vegetable" },
      {id:4, name: "Lentil", alt: "Legume" }
    ];
    function App() {
      return (
        <span>
          {data.map((item) => (
            <button key={item.id}>{item.alt.toUpperCase()}</button>
          ))}
        </span>
      );
    }