如何在 react componentWillMount 中使用数据设置？答案

【问题标题】：how to use data setting in react componentWillMount?如何在 react componentWillMount 中使用数据设置？
【发布时间】：2017-06-22 03:10:38
【问题描述】：

我想在组件之前渲染时获取初始数据。
因此，我尝试在 componentWillMount 中声明更新操作。
尽管状态发生了变化，但当我在 componentDidMount 确认控制台结果时，结果为空白。

imageUpload.js

export const IMAGE_UPLOAD = 'IMAGE_UPLOAD';
export function imageUpload(photo) {
  return {
    type: IMAGE_UPLOAD,
    photo
  }
}

Reducers.js

import { IMAGE_UPLOAD } from './actions/imageUpload';

export default function imageUpload(state = {photo: ''}, action) {
  switch(action.type) {
    case IMAGE_UPLOAD:
      return {
        ...state,
        photo: action.photo
      }
    default:
      return state
   }
}

App.js

import photo from './data/photo.json' // photo type: json
import imageUpload from './actions/imageUpload'

componentWillMount() {
  Storage.prototype.setObject = (key, value) => {
    this.setItem(key, JSON.stringify(value))
  }
  Storage.prototype.getObject = (key) => {
    return this.getItem(key) && JSON.parse(this.getItem(key))
  }
  const photoData = localStorage.getObject('photos');
  if(photoData) // data in localStorage
    imageUpload(photoData) // state setting localStorage data
  else // data not in localStorage
    imageUpload(photo) // state setting photo json data
}

componentDidMount() {
  console.log(this.props.photo); // result: blank ( I want result: any value)
}

class App extends React.Component {
  // ...
}

const mapStateToProps = (state) => ({
  photo: state.imageUpload.photos
})

const mapDispatchToProps = (dispatch) =>({
  imageUpload: bindActionCreators(imageUpload, dispatch)
})

export default connect(mapStateToProps, mapDispatchToProps)(App)

我该怎么办？
谢谢。

【问题讨论】：

mapStateToProps 中是否有输入错误...而不是photo: state.imageUpload.photos 应该是photo: state.imageUpload.photo
如果 componentDidMount 函数是连接组件的一部分（在您的代码中不清楚），则它的 props 中没有照片对象。您需要查看子组件并查看它的prop。

标签： javascript reactjs redux state

【解决方案1】：

Redux 状态更新是异步的，这意味着 Redux 状态更新需要一些时间。您在 componentDidMount 中看不到任何数据的原因是，在调用该方法时，redux 异步操作仍未完成。

尝试在componentWillRecieveProps 中查找数据。当异步操作完成时，将使用数据调用此方法。

所以：

componentWillRecieveProps(nextProps) {
    console.log(nextProps.photo);
}

【讨论】：

常规 redux 操作及其调度默认是同步的。如果你想使用异步调度，你必须使用 3rd 方技术，如 Thunks 或 Epics。