React Redux 状态正在更新，但组件道具未更新答案

【问题标题】：React Redux State is Updating, but Component Props Not UpdatingReact Redux 状态正在更新，但组件道具未更新
【发布时间】：2020-01-16 21:40:05
【问题描述】：

免责声明：这是我的第一个 react 应用程序，我是一名仍在学习的 cs 学生

我做了一些控制台日志，props 和 nextprops 是正确的，但除非与之交互，否则它不会正确呈现。

我必须在不透明度更改之前单击一个按钮两次，并且其他按钮的不透明度不会更新为 1。

我已经通过很多谷歌搜索并尝试了一些东西，但它们都没有奏效。

具有 2 个来自 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 续

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)

更新 #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>
            ...

【问题讨论】：

检查组件将收到的道具
你能为此创建一个codepen吗？

标签： javascript react-native react-redux render

【解决方案1】：

来自同行的解决方案：

在样式设置为通过将未使用的键更改为随机数来强制重新渲染之前包含这行代码

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

如本例所示：

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

【讨论】：

【解决方案2】：

您可以使用生命周期将道具设置为状态。

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


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

【讨论】：

我将此代码添加到我的 WeekMenu.js（请参阅更新 #1）。我 console.log 了一堆东西，状态和道具都在点击时更新。单击时按钮的不透明度仍然没有改变。单击两次后它会更改，并且仅针对该特定的单个按钮进行更新。我认为 style={...} 在 state 和 props 更改后更新存在问题。

【解决方案3】：

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

【讨论】：