等待 API 响应时出现控制台错误 - React/Redux

Question

我正在从 componentDidMount 中的远程 API 获取数据：

componentDidMount() {
   this.props.fetchRemoteData('photos')
}

然后将接收到的数据传递到我在mapStateToProps中的组件道具，使用选择器从接收到的数组中过滤特定对象：

const mapStateToProps = (state, { params }) => {
   const photoId = parseInt(params.photoId)
   return {
      singlePhoto: getSinglePhoto(state.filteredList.photos.jsonArray, photoId),
      isFetching: state.filteredList.photos.isFetching
   }
}

内容呈现，但在此之前有一瞬间，它似乎在成功检索数据之前尝试呈现内容，这会在控制台中引发以下错误：

Uncaught TypeError: Cannot read property 'charAt' of undefined

undefined在这里指的是this.props.singlePhoto。但是，当 singlePhoto 接收到数据负载时，内容就会呈现。

这是我的容器组件：

class PhotoSingle extends Component {
   componentDidMount() {
      this.props.fetchRemoteData('photos')
   }
   render() {
      const {singlePhoto, isFetching} = this.props
      const photoTitle = capitalizeFirstLetter(singlePhoto.title)
      return (
         <div>
            <PhotoSingleImg singlePhoto={singlePhoto} photoTitle={photoTitle} isFetching={isFetching}/>
         </div>
      )
   }
}

const mapStateToProps = (state, { params }) => {
   const photoId = parseInt(params.photoId)
   return {
      singlePhoto: getSinglePhoto(state.filteredList.photos.jsonArray, photoId),
      isFetching: state.filteredList.photos.isFetching
   }
}
import * as actions from '../actions/actionCreators'

PhotoSingle = connect(mapStateToProps, actions)(PhotoSingle)

export default PhotoSingle;

还有我的演示组件：

const PhotoSingleImg = ({ singlePhoto, photoTitle, isFetching }) => {
   if (isFetching) {
      return <h4>Fetching data...</h4>
   }
   return (
   <div>
      <h1>Single Photo</h1>
      <h3>Title</h3>
      <hr />
      <img className='single-photo' src={singlePhoto.url} />
      <p>Album ID: {singlePhoto.albumId} | Photo ID: {singlePhoto.id}</p>
   </div>
   )
}

export default PhotoSingleImg;

我不确定如何制作，因此内容只会在收到 API 响应后尝试呈现。

感谢任何帮助。

Answer 1

你有没有在redux store中定义初始状态？

你可以这样试试：

return singlePhoto ? 
   (<div>
      <h1>Single Photo</h1>
      <h3>Title</h3>
      <hr />
      <img className='single-photo' src={singlePhoto.url} />
      <p>Album ID: {singlePhoto.albumId} | Photo ID: {singlePhoto.id}</p>
   </div>) : null

等待 API 响应时出现控制台错误 - React/Redux

Console error whilst waiting for API response - React/Redux

ajax

asynchronous

render

reactjs

redux