为什么名称显示为空？答案

【问题标题】：Why is the name appearing empty?为什么名称显示为空？
【发布时间】：2020-05-14 20:06:53
【问题描述】：

我是 React 新手，我第一次尝试使用状态。出于某种原因，statelist.name 不返回任何内容。我需要使用构造函数吗？任何帮助都会很棒。

import React from 'react';

class HorizantScroller extends React.Component {

  state = {
    statelist: [
  {name: "Brands",
    items: ["1", "2", "3"]
  },
  {name: "Films",
    items: ["f1", "f2", "f3"]
  },
  {name: "Holiday Destination",
    items: ["f1", "f2", "f3"]
  }
]

  };

  render() {
    const { selected } = this.state;
    // Create menu from items
    const menu = Menu(list, selected);
    const {statelist} = this.state;


    return (
      <div>
      <div name={statelist.name}></div>
      </div>

    );
  }
}

export default HorizantScroller;

【问题讨论】：

statelist 是一个数组，而不是一个对象。您必须告诉它访问该属性的对象。测试试试statelist[0].name。
好的，如果我想访问statelist 的所有名称，而不仅仅是第一项呢？
map 函数。
这能回答你的问题吗？ How can I access and process nested objects, arrays or JSON?

标签： javascript reactjs state

【解决方案1】：

StateList 是一个数组，您需要先指定状态的索引并获取属性“名称”。示例：statelist[0].name

【讨论】：

好吧，如果我想访问 statelist 的所有名称而不仅仅是第一项呢？
然后你需要使用一些数组迭代器函数，比如 foreach 或 map。这样，您将遍历数组并执行您需要的操作。如果你愿意，你可以使用 const names = statelist.map(state => state.map); 创建一个新数组。这样你就可以循环遍历这个新数组，而不必担心属性

【解决方案2】：

你可以做这样的事情来让它变得动态：

{statelist.map((list,index)=>{
   return (
        <div key={index} name={list.name}></div>
     );
})

}

这样，您将拥有 statelist 中的所有值。用上面的代码替换<div name={statelist.name}></div>。请注意我是如何在 div 中添加 key 的。这对于区分 div 的反应很重要，如果你不这样做，它也会在控制台中抱怨:)。

【讨论】：

【解决方案3】：

您的问题不在于反应状态，而在于您正在使用的数据类型。首先statelist不是一个对象，所以你不能使用statelist.name，它是一个数组，所以你需要传递你试图检索的数组位置的索引，它应该类似于@987654323 @。

如果您想访问 statelist 的所有名称，而不仅仅是您需要在数组中迭代的第一项并执行以下操作：

{statelist.map((element,index) => (
   <div key={index} name={element.name}></div>
 )) }

【讨论】：

【解决方案4】：

statelist 是一个数组，没有名为 name 的字段。数组的元素具有字段name。这意味着您必须访问一个元素。您可以使用索引来做到这一点：

let index = 0;

<div name={statelist[0].name}></div>

如果要获取所有元素的名称，可以使用map 函数：

{statelist.map(element => {
  return (
    <div name={element.name}></div>
  );
})}

【讨论】：