如何设置redux-promise，使axios请求有时间完成？
如何设置redux-promise，使axios请求有时间完成？
提问于 2018-06-10 13:48:56
新的反应和复习，所以请容忍我。
我有一个react容器，它在加载时调用一个动作。该操作返回axios请求，理想情况下，reducer将返回结果并更新状态。但是，axios请求的结果似乎并没有结束。
当我打印this.props时，我得到一个错误，this.props.sparts.map不是一个函数，sparts是空的，所以我假设请求没有完成。
组件
class Spart extends Component {
renderSpart() {
let sparts = []
console.log('please print something')
console.log(this.props)
this.props.sparts.map((spart, index) => {
sparts.push(
<div class="ui column wide spart-container">
<div class="fake-img"></div>
<div class="audio-container">
{spart.song}
</div>
<div class="writing-container">
{spart.writing}
</div>
</div>
)
})
return _.chunk(sparts, 3).map(function(group) {
return <div class="three column row">{group}</div>
})
}
render() {
return (
<div class="ui equal width grid spart-container">
{this.renderSpart()}
</div>
)
}
}
function mapStateToProps(state) {
console.log('mapStateToProps')
console.log(state)
return {
sparts: state.sparts
};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({ getSparts: getSparts }, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(Spart);操作
export function getSparts() {
const request = axios.get(`${BASE_URL}/sparts`)
return {
type: GET_SPARTS,
payload: request
}
}还原器
export default function(state = {}, action) {
switch (action.type) {
case GET_SPARTS:
return [ action.payload.data, ...state ]
default:
return state;
}
}中间件
const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<App />
</Provider>,
document.getElementById('root'));回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-10 17:08:30
如果不检查带有条件的渲染部分，这是异步操作的标准问题。使用类似如下的内容：
{this.props.sparts.length > 0 && this.renderSpart()}在更深入地查看代码之后，出现了一个问题，getSparts()操作从未被调用过。因此，解决方案是像OP那样在适当的生命周期方法(如componentDidMount )中调用它：
componentDidMount() {
this.props.getSparts();
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50780933
复制相关文章
相似问题