我有以下场景,我在获取数据之前使用Preloader,然后成功时将布尔值设置为false,然后将数据拉入。所有这些工作正常,但是当使用时单击事件并再次调度,一切正常,布尔值不会返回到它原来的状态,这将是'true'。关于我需要做什么的任何想法重新设定它?
App.jsx
....
const mapStateToProps = (state) => ({ fetching: state.flickr.fetching, flickr: state.flickr.flickr })
const mapDispatchToProps = (dispatch) => bindActionCreators({fetchFlickr}, dispatch)
class Prices extends Component {
constructor(props) {
super(props);
}
onChange(sorter) {
console.log('params', sorter);
}
componentDidMount() {
socket.on('get-data-back', (data) => {
let that = this;
if (data) {
this.props.fetchFlickr();
}
})
}
handleClick(e) {
{ this.props.fetching ? false : true } ----- Reset my value?
socket.emit('fetchData');
}
render() {
const { fetching } = this.props;
return (
<div>
<Spin spinning={fetching} delay={500} />
<button onClick={(e) => this.handleClick(e)}>Refresh</button>
</div>
)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Prices);
Reducer.jsx:
const initialArray = {flickr: [], fetching: true, fetched: false, error: null}
function flickr(state=initialArray, action) {
switch (action.type) {
case "FETCH_FLICKR": {
return {...state, fetching: true}
}
case "FETCH_FLICKR_REJECTED": {
return {...state, fetching: false, error: action.payload}
}
case "FETCH_FLICKR_FULFILLED": {
return {
...state,
fetching: false,
fetched: true,
flickr: action.payload,
}
}
return state
}
export default flickr;