redux connect passes props too late
I am writing simple audio player using react-native. And i have got an issue about passing props to component across react-redux connect method.
Here is my Container code:
import { connect } from 'react-redux';
import Music from './Music';
import MusicActions from '../../Actions/MusicActions';
const mapStateToProps = store => ({
tracksObject: store.MusicReducer.get('tracks'),
isLoaded: store.MusicReducer.get('isLoaded'),
isLoading: store.MusicReducer.get('isLoading'),
playing: store.MusicReducer.get('playing'),
duration: store.MusicReducer.get('duration'),
});
const mapDispatchToProps = dispatch => ({
movePan: value => dispatch(MusicActions.movePan(value)),
});
export default connect(mapStateToProps, mapDispatchToProps)(Music);
And here is few methods from component
componentWillReceiveProps() {
if (this.props.playing) {
const step = this.props.duration * 0.025;
const stepFrequency = this.props.duration / step;
const intervalID = setInterval(
() => this.setState(state => ({ sliderValue:
(state.sliderValue + step) })),
stepFrequency,
);
this.setState({ intervalID });
}
}
render() {
return (
<View style={styles.view}>
<View>
{ this.renderSongList() }
</View>
<Slider
value={this.state.sliderValue}
onValueChange={(value) => { this.onSliderChange(value); }}
style={styles.slider}
minimumTrackTintColor="#ba383a"
thumbStyle={{ top: 22, backgroundColor: '#ba383a' }}
/>
</View>
);
}
When song loads and stores value 'playing' becomes true, components method componentWillReceiveProps calls, but this.props.playing flag is false in spite of it is true in mapStateToProps. But after componentWillReceiveProps render calls and this.props.playing is true there.
This is expected behavior, in componentWillReceiveProps
, this.props
is a reference to the previous props. You'll want to use the nextProps
parameter of componentWillRecieveProps
.
componentWillReceiveProps(nextProps) {
if (nextProps.playing) {
// Rest of code
}
}
链接地址: http://www.djcxy.com/p/52164.html
上一篇: 反应js避免包装div
下一篇: 重新连接通过道具来不及