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

我想在组件渲染之前获取初始数据。
因此，我尝试在componentWillMount中声明更新操作。
虽然状态发生变化，但确认控制台结果在componentDidMount结果为空时。如何在反应componentWillMount中使用数据设置？

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怎么办？
谢谢。

来源

2017-06-22 Wonjun Kim

有在mapStateToProps打字错误，而不是'照片...：state.imageUpload.photos'它应该是'照片：state.imageUpload.photo' –

如果componentDidMount功能是连接组件的一部分（在您的代码中不清楚），它的道具中没有照片对象。你需要看看孩子的组成部分，看看它的道具。 –

Redux状态更新是异步的，这意味着它需要一些时间才能更新Redux状态。之所以没有看到componentDidMount中的任何数据，是因为在调用方法时，redux异步操作仍未完成。

试试在寻找componentWillRecieveProps的数据。当异步操作完成时，此方法将与数据一起被调用。

所以：

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

来源

2017-06-22 03:13:54 Grandas

默认情况下，定期重新配置操作及其调度是同步的。如果你想利用异步调度，你必须使用第三方技术，如[Thunks]（https://github.com/gaearon/redux-thunk）或[Epics]（https://github.com/BerkeleyTrue/redux -史诗）。 –

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

回答

相关问题