为什么名称显示为空？

Question

我是React的新手，我正在尝试第一次使用state。由于某些原因，30不返回任何内容。我需要使用构造函数吗？任何帮助都会很棒。

statelist.name

Answer 1

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

Answer 2

您可以执行以下操作使其动态：

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

}

这样，您将在状态列表中拥有所有值。将<div name={statelist.name}></div>替换为以上代码。 请注意，我是如何向div添加key的。这对于做出区分div的反应非常重要，如果不这样做，它也会在控制台中抱怨：）。

Answer 3

您的问题不在于反应状态，而在于您使用的数据类型。首先statelist不是对象，因此不能使用statelist.name，它是一个数组，因此您需要传递要检索的数组位置的索引，应该是类似statelist[0].name。

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

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

Answer 4

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

let index = 0;

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

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

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