Question

我需要一个alt字符串数组。我可以使用name字符串映射该数组，但是无法使其返回“ alt”。这是我尝试过的：

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

  <span>
      {data.map(item => {
        return (
         <Button item={item.alt.toUpperCase()}>
         {item}
         </Button>
         );
       })}
  </span>

要获得name字符串数组，可以这样做：

  <span>
      {data.map(item => {
        return (
         <Button key={item.name} item={item.name.toUpperCase()}>
         {item}
         </Button>
         );
       })}
  </span>

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

Answer 1

我认为您正在尝试创建按钮，请看下面

下面的代码被修改为使用映射功能键，因为每个记录都是唯一的，当使用动态创建的组件或更改数据时，反应键非常有用。设置键值将使您的组件在更改后保持唯一标识，并且还有助于提高性能。您可以阅读下面的博客，其中很好地说明了如何使用键。 https://programmingwithmosh.com/react/why-do-i-need-keys-in-react-lists/

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

使用此链接，它在这里工作 https://codesandbox.io/s/friendly-wave-t117u

Answer 2

尝试一下：

UTF-8

这是您推荐的Working Sample StackBlitz。

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

2 个答案: