Question

我希望在组件呈现之前获取初始数据。
所以，我尝试在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)

我做什么sholud？谢谢。

Answer 1

Redux状态更新是异步的，这意味着它将花费一些时间来更新Redux状态。您在componentDidMount中没有看到任何数据的原因是因为在调用方法时，redux异步操作仍未完成。

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

所以：

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

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

1 个答案: