我有一个默认状态,如下所示,我正在从 postgres 获取数据,考虑到我的 photos 数组为空的情况,状态不会更新。
原因是我直接访问了一些参数,{this.state.media.photos[this.state.media.selectedMediaIndex].url}
我从行动中看到的是
action 对象 {type: "FETCH_MEDIA_FULFILLED", payload: Array[1]}
错误类型错误:无法读取 null 的“未定义”属性
action 对象 {type: "FETCH_MEDIA_REJECTED", payload: TypeError: 无法在 Media.render (http://localhost:3000/clien...) 读取 null 属性 'undefined'
这样做的正确方法是什么?在设置状态时,我应该创建一个默认对象,更新所有参数然后设置状态吗?
如果至少有一个 photos 数组元素没有问题,唯一的问题是当 photos 列为 null 时的第一个状态。
状态:
this.state = {
media : {
video : "",
photos : [{
title : "",
url : "",
category : {
interior : false,
exterior : true,
closeup : false
},
display : {
preview : false,
featured : true,
none : false
},
size : "",
attribution_link : "",
attribution_text : "",
description : ""
}],
selectedMediaIndex : 0
}
}
一旦 componentWillReceiveProps 收到 nextProps,我就会更新我的状态。
componentWillReceiveProps(nextProps){
if(nextProps.media.length){
this.setState({
media : nextProps.media[0]
})
}
}
连接器:
const mapStateToProps = function (store) {
return {
media: store.media.media
};
};
const PhotoConnector = Redux.connect(mapStateToProps)(Media);
export default class MediaConnector extends React.Component {
render() {
return (
<PhotoConnector media={this.props.media}/>
);
}
}
reducer :
export default function reducer(
state={
media: [],
fetching: false,
fetched: false,
error: null,
}, action) {
switch (action.type) {
case "FETCH_MEDIA": {
return {...state, fetching: true}
}
case "FETCH_MEDIA_REJECTED": {
return {...state, fetching: false, error: action.payload}
}
case "FETCH_MEDIA_FULFILLED": {
return {
...state,
fetching: false,
fetched: true,
media: action.payload,
}
}
}
return state
更新
我有办法避免错误,我基本上是在检查照片是否为 null 并为其设置默认状态数组。
componentWillReceiveProps(nextProps){
if(nextProps.media.length){
if(!nextProps.media.photos){
this.setState({
media : {
video : nextProps.media[0].video,
photos : [{
title : "",
url : "",
category : {
interior : false,
exterior : true,
closeup : false
},
display : {
preview : false,
featured : true,
none : false
},
size : "",
attribution_link : "",
attribution_text : "",
description : ""
}],
selectedMediaIndex : 0
}
})
}
else{
this.setState({
media : nextProps.media[0]
})
}
}
}
任何其他解决方案将不胜感激。
最佳答案
为什么不只有默认 Prop ?
PhotoConnector.defaultProps = {
media: {
video: [],
photos: [],
}
};
或者默认商店?
class Media {
constructor(js = {}) {
this.video = js.video || [];
this.photos = js.photos || [];
}
}
state={
media: [new Media()],
}
case "FETCH_MEDIA_FULFILLED": {
return {
...state,
fetching: false,
fetched: true,
media: action.payload.map(m => new Media(m)),
}
关于javascript - 获取数据后处理状态 - React,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41467153/