React Redux状态正在更新，但组件属性未更新

Question

Disclaimer: this is my first react app and im a cs student thats still learning

I did some console logs and the the props and nextprops are correct, but it doesnt render correctly unless interacted with.

I have to click a button twice before the opacity changes and the opacity of the other buttons doesnt update to 1.

I've gone through quite a few google searches and tried a few things, but none of them worked.

Class with 2 instances of the button from WeekMenu.js

class WeekMenu extends Component{
render(){
    return(
        <View style={styles.container}>
            <TouchableOpacity 
            style={this.props.daysOfWeek[0] ? {opacity: 0.5} : {opacity: 1}}
            onPress={() =>this.props.dayClicked(0)}
            >
                <View style={styles.left}>
                    <Text style={styles.text}>S</Text>
                </View>
            </TouchableOpacity>
            <TouchableOpacity 
            style={this.props.daysOfWeek[1] ? {opacity: 0.5} : {opacity: 1}}
            onPress={() =>this.props.dayClicked(1)}
            >
                <View style={styles.middle}>
                    <Text style={styles.text}>M</Text>
                </View>
            </TouchableOpacity>

WeekMenu.js contiued

function mapStateToProps(state){
    return{
        daysOfWeek: state.daysOfWeek
    }
}
function mapDispatchToProps(dispatch){
    return{
        dayClicked: (value) => dispatch({type: 'DAY_CLICKED', value})
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(WeekMenu)

App.js

const initialState = {
    daysOfWeek: [0, 0, 0, 0, 0, 0, 1]
}
changeActiveDay = (day) => {
    newDaysOfWeek = new Array(7).fill(0)
    newDaysOfWeek[day] = 1
    return newDaysOfWeek
}
const reducer = (state = initialState, action) => {
    switch (action.type) {
        case 'DAY_CLICKED':
            return {
                ...state,
                daysOfWeek: changeActiveDay(action.value)
            }
        default:
            return state
    }
}
const store = createStore(reducer)

Update #1:

class WeekMenu extends Component{
state = {
    daysOfWeek: this.props.daysOfWeek
}

componentDidUpdate(prevProps){
    if(prevProps.daysOfWeek !== this.props.daysOfWeek)
        this.setState({daysOfWeek: this.props.daysOfWeek})
}

render(){
    return(
        <View style={styles.container}>
            <TouchableOpacity 
            style={this.state.daysOfWeek[0] ? {opacity: 0.5} : {opacity: 1}}
            onPress={() => this.props.dayClicked(0)}
            >
                <View style={styles.left}>
                    <Text style={styles.text}>S</Text>
                </View>
            </TouchableOpacity>
            ...    

Answer 1

您需要使用componentWillUpdate()或shouldComponentUpdate()监听更改，并使用nextProps和prevState作为参数来nextProps更改。

Answer 2

You can use lifecycle to set your props to state.

componentDidUpdate(prevProps, prevState) { 
  this.setDaysOfWeek(prevProps, prevState)
}


setDaysOfWeek(prevProps,state) {
  if(prevProps.daysOfWeek !== state.daysOfWeek){
    this.setState({daysOfWeek: prevProps.daysOfWeek})   
  }
}

Answer 3

Solution from peer:

Include this line of code before the style is set to force a rerender by changing an unused key to a random number

key={String(Math.random())}

As in this example:

<TouchableOpacity
    key={String(Math.random())}
    style={this.state.daysOfWeek[index] ? {opacity: 0.5} : {opacity: 1}}
    onPress={() => this.props.dayClicked(index)}
>