Redux：显示单个记录，但 json 是一个数组答案

【问题标题】：Redux: display single record but json is an arrayRedux：显示单个记录，但 json 是一个数组
【发布时间】：2017-04-05 08:26:58
【问题描述】：

我的 react-redux 应用程序在 JSON 中获得了一条记录，但该记录是一个数组，因此它看起来像这样（注意 [] 括号）：

{"person":[{"PersonID":1,"Name":"John Smith","Gender":0}]}

因此，redux 商店将其显示为 person->0->{"PersonID":1,"Name":"John Smith","Gender":0}。因此，状态显示 person 对象为空：

Name: this.props.person?this.props.person.Name:'object is empty',

我的 PersonPage.js 包含这样的详细信息页面：

<PersonDetail person={this.props.person} />

详情页有这个：

import React from 'react';
import classnames from 'classnames';

class PersonDetail extends React.Component {
   state = {
        Name: this.props.person?this.props.person.Name:'',
        PersonID: this.props.person?this.props.person.PersonID:null,
        loading: false,
        done: false
    }


 componentWillReceiveProps = (nextProps) => {
      this.setState({
        PersonID: nextProps.person.PersonID,
        Name: nextProps.person.Name

      });
  }

这是我的原始 Redux 状态：

people: [
    [
      {
        PersonID: 51,
        Name: 'John Smith',
        Gender: 0      
      }
    ]
  ]

【问题讨论】：

您想要类似人的东西：[ {}, {}, {} ]？或者只是从那里获取对象？
我已经有“人”（这适用于列表页面），但对于单条记录，我只想要“人”。但是我可以通过采用 0 索引来让它工作，我也很好。它只是看起来不那么干净或合乎逻辑。
检查我的答案，我认为编写一个 util 函数来解析“人”是有意义的

标签： json reactjs redux

【解决方案1】：

Person 是一个array，其中包含有Name 键的object，所以你还需要使用index，这样写：

this.props.person && this.props.person.length ? this.props.person[0].Name : '';

检查这个例子：

var data = {
      "person":[
                 {
                    "PersonID":1,
                    "Name":"John Smith",
                    "Gender":0
                  }
              ]
};

console.log('Name: ', data.person[0].Name);

【讨论】：

是的，还是有这个问题。恐怕这两个答案都无济于事。这是我的原始 redux 状态：

【解决方案2】：

我认为您应该为每个人的数据映射个人详细信息。

在 PersonPage.js 上，

如下映射：

{
    this.props.person.map((p)=>{
    return (<PersonDetail person={p} />)
    })
}

【讨论】：

看起来合乎逻辑，但给了我一个空白页。

【解决方案3】：

如果我是你，我会做一个这样的 util 函数：

const parsePeople = people => {

  if (people instanceof Array) return parsePeople(people.pop())

  return people

}


const people = [
  [{
    PersonID: 51,
    Name: 'John Smith',
    Gender: 0      
  }]
]


const person = parsePeople(people)

console.log(person) -> Object

我们使用递归检查 people 是否是 Array 的实例，然后使用 people.pop() 再次调用该函数，返回数组的最后一个元素。

【讨论】：

【解决方案4】：

您的人员数据上有一个数组...您只能在没有 0 的情况下使用地图访问它...

示例：

componentWillReceiveProps = (nextProps) => {
  var PersonID = nextProps.person ? nextProps.person.map(item => { return item.PersonID}) : ''; 
  var Name = nextProps.person ? nextProps.person.map(item => { return item.Name}) : ''; 

this.setState({
    PersonID,
    Name
  });

}

这是考虑到你只有 1 个数组。

【讨论】：

抱歉，我在控制台中得到一个空白页，显示此错误：未捕获的类型错误：无法读取 null 的属性“名称”
在这种情况下，您需要在返回时添加验证，因为如果这是错误..您的第一个渲染是空的...更正您需要包含 return item.Name?item.Name:''; 而不仅仅是return item.Name 也应该应用于 PersonID..

【解决方案5】：

我修好了！这是给出的两个答案的组合：在 PersonPage.js 中，我必须像这样调用 PersonDetails 对象：

<PersonDetail
            person={this.props.person[0]}           
          />

这是新的 MapStatetoProps：

function mapStateToProps(state, props) {
  const { match } = props;
   if (match.params.PersonID) {    
         return {   
     person: state.people
    }    
 }

感谢回答的人。这让我发疯了。

【讨论】：