reactjs - 无法读取不可变记录中的列表条目

Question

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

这是相关记录

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

返回

console.log("PHOTOIMAG::",competitor.imageLink);

返回

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

和

console.log("PHOTOKEY::",competitor.key);

返回

PHOTOKEY:: -LCK49TfAVBPBATG1oxp

但是

console.log("PHOTODESC::",competitor.description)

返回

PHOTODESC:: undefined

我已经将我的 Prop 传递到我的功能组件中，并连接了一个名为竞争对手的 Prop 类型，如下所示。

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

在我的函数本身中

function Photo({competitor}) {

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

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

{competitor.imagLink} 有效。我的照片呈现在页面上。但我没有对它们的描述，尽管我可以看到它们在记录中具有描述条目(在控制台图像上方)。

我已经尝试了这些我不应该需要的，因为我是一个记录。

console.log("PHOTODESC::",competitor.get('description'));
console.log("PHOTODESC::",competitor.getIn(["description",0]))

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

我使用最新的 Chrome 浏览器进行 React ^15.6.1、redux ^3.7.1、immutable ^3.8.1。查了一圈，在网上没找到类似的问题。非常感谢任何帮助。

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

我的竞争对手 reducer 。这主要是待办事项的样板，所以这可能是我的问题。

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
    };
 }

Answer 1

所以我终于找到了。这是我实例化记录时的一个拼写错误。我在记录中的描述中遗漏了一个“s”，这使整个事情变得困惑。

这就是我的糟糕之处

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

应该是这样

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

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

希望这对将来的人有帮助!