Reactjs Can'；t读取不可变记录中的列表项

我对不可变的记录和列表还是有点陌生，但这对我来说真的很困惑。我有一张唱片，里面有一张单子。列表中有3个条目。我可以很简单地使用点符号访问3个中的2个。但其中一个似乎是未定义的，无论我做什么，甚至知道我可以在组件的记录中看到它。下面是我试图使用的无状态功能组件中记录的控制台日志

这是相关记录

console.log("PHOTO0::",competitor);

返回

PHOTOIMAG:: https://testcreative.co.uk/wp-content/uploads/2017/10/Test-Logo-Circle-black-transparent.png

PHOTOKEY:: -LCK49TfAVBPBATG1oxp

PHOTODESC:: undefined

返回

PHOTOIMAG:: https://testcreative.co.uk/wp-content/uploads/2017/10/Test-Logo-Circle-black-transparent.png

PHOTOKEY:: -LCK49TfAVBPBATG1oxp

PHOTODESC:: undefined

及

返回

PHOTOIMAG:: https://testcreative.co.uk/wp-content/uploads/2017/10/Test-Logo-Circle-black-transparent.png

PHOTOKEY:: -LCK49TfAVBPBATG1oxp

PHOTODESC:: undefined

但是

返回

PHOTOIMAG:: https://testcreative.co.uk/wp-content/uploads/2017/10/Test-Logo-Circle-black-transparent.png

PHOTOKEY:: -LCK49TfAVBPBATG1oxp

PHOTODESC:: undefined

我已经将我的道具传递到我的功能组件中，并连接了一个名为competitor的道具类型，就像这样

Photo.propTypes = {
competitor: PropTypes.object.isRequired
}

在我的功能中

function Photo({competitor}) {

所以我可以像这样在返回中的条目上使用点符号，但它只在ImageLink上有效

            <img className="photo" src={competitor.imageLink} alt={competitor.description} />

我只是“未定义”。所以看起来很奇怪，除了描述，我在访问其他条目时没有遇到任何问题。我是否不了解我的不可变记录中的这些列表项以及如何使用它们

Im React ^15.6.1，redux ^3.7.1，不可变^3.8.1使用最新的chrome浏览器。已经四处查看，但在网上没有找到类似的问题。非常感谢您的帮助

**在此处添加请求的代码******

我的竞争对手。这主要是一个待办事项中的锅炉板，所以这可能是我的问题

export const CompetitorsState = new Record({
deleted: null,
filter: '',
list: new List(),
previous: null
});

export function competitorsReducer(state = new CompetitorsState(), {payload, type}) {
 switch (type) {
case CREATE_COMPETITOR_SUCCESS:
  return state.merge({
    deleted: null,
    previous: null,
    list: state.deleted && state.deleted.key === payload.key ?
          state.previous :
          state.list.unshift(payload)
  });

case REMOVE_COMPETITOR_SUCCESS:
  return state.merge({
    deleted: payload,
    previous: state.list,
    list: state.list.filter(competitor => competitor.key !== payload.key)
  });

case FILTER_COMPETITORS:
  return state.set('filter', payload.filterType || '');

case LOAD_COMPETITORS_SUCCESS:
  return state.set('list', new List(payload));


default:
  return state;
}

相关行动

export const Competitor = new Record({
    decription: null,    
    imageLink: null,
    key: null,
});

export const competitorList = new FirebaseList({
    onAdd: createCompetitorSuccess,
    //onChange: updateTaskSuccess,
    onLoad: loadCompetitorsSuccess,
    onRemove: removeCompetitorSuccess
}, Competitor);




export function loadCompetitors() {
    return (dispatch, getState) => {
          const { auth } = getState();
          competitorList.path = `competitors/${auth.id}`;
          competitorList.subscribe(dispatch);
    };
}

export function loadCompetitorsSuccess(competitors) {
    return {
        type: types.LOAD_COMPETITORS_SUCCESS,
        payload: competitors
     };
}

export function createCompetitor(imageLink, description) {
      console.log("ACTION_CREATECOMESTART::", imageLink)
      console.log("ACTION_CREATECOMESTART2::", description)
      return dispatch => {
        competitorList.push({ description,imageLink })
        .catch(error => dispatch(createCompetitorError(error)));
      };
}

export function createCompetitorSuccess(competitor) {
    console.log("ACTION_CREATECOMESTARTSUCCESS::",competitor)
    return {
      type: types.CREATE_COMPETITOR_SUCCESS,
      payload: competitor
    };
 }

---

所以我终于找到了。这是一个打字错误，我正在实例化我的记录。我的记录中缺少了一个“s”，这把整个事情搞砸了

这就是我所拥有的，很糟糕

export const Competitor = new Record({
decription: null,    
pic: null,
key: null,  
});

应该是,

export const Competitor = new Record({
description: null,    
pic: null,
key: null,  
});

在我上面控制台日志中的这张图片中，它一直在那里，我错过了它，因为我正确地输入了我的数据库，并且它正确地显示在我的列表条目中

---

希望这对将来的人有帮助

好的，您使用的是immutable.record，我可以看看您如何在您的reducer中映射竞争对手的状态吗。我在上面加了。我想你只需要加载和添加，但我想我会给你全部。谢谢操作，因为它有记录创建。我在我的顶级组件类中使用选择器，从中我传递所有做列表和筛选的内容（现在不是真正筛选任何内容）。通过使用immutable.record，您可以摆脱

.get（）

，而不需要不可变选择器