如何从对象数组中获取价值？

Question

我有一个react应用，并使用redux和props将对象数组放入组件中，而我正在获取它们。但是我无法访问该数组中的一个对象内部的特定属性。

与此：

console.log(this.props.users)

我得到列出的数组，其中包含所有对象。但是当我需要访问特定对象或该对象的属性时，例如：

console.log(this.props.users[0])
console.log(this.props.users[0].name)

我遇到错误：

Cannot read property '0' of undefined

但是当我使用map（）方法遍历数组时，我可以使用它。为什么我不能正常访问它？

Answer 1

可能是在执行未定义的行this.props.users时。检查添加了console.log(this.props.users[0])

的流

Answer 2

您正在尝试加载this.props.users的属性。无需等待数据获取即可呈现组件。 console.log(this.props.users)表示您得到一个数组，但在此之上，当组件在undefined加载之前呈现时，它可能至少记录一次this.props.users。

您有两种选择。您可以在render方法的最顶部执行此操作，以防止执行该方法中的其余代码：

if (!this.props.users) return null;

一旦获取了数据并且道具发生了变化，render方法将再次被调用。

另一种选择是为化简器中的users声明一个空数组的默认值。

Answer 3

const App = () => {
  
  const example = () => {
    const data =[{id:1 ,name: "Users1", description: "desc1"}, 
                {id:2 ,name: "Users2", description: "desc2"}];
    return (
      <div>
      {data.map(function(cValue, idx){
          console.log("currentValue.id:",cValue.id);
          console.log("currentValue.name:",cValue.name);
          console.log("currentValue.description:",cValue.description);
         return (<li key={idx}>name = {cValue.name} description = {cValue.description}</li>)
      })}
      </div>
      );
    }

  return(
    <p style = {{color:'white'}}>
      {example()}
    </p>
  );
}

export default App;