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

我已经将我的道具传递到我的功能组件中，并且像这样连接了一个名为竞争对手的proptype。

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]))

我得到了＃undefined＆＃39;。所以看起来很奇怪我访问其他条目但没有问题。我不理解我的不可变记录中的这些列表条目以及我如何使用它们？

Im React ^ 15.6.1，redux ^ 3.7.1，immutable ^ 3.8.1使用最新的chrome浏览器。环顾四周，并没有能够在网上找到类似的问题。任何帮助非常感谢。

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

我的竞争对手减速机。这主要是来自todo的锅炉板，所以这可能是我的问题。

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

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

希望这可以帮助将来的某个人！

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

1 个答案: