Question

免责声明：这是我的第一个React应用，我是正在学习的CS学生

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

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

我已经进行了很多Google搜索，并尝试了一些方法，但是没有一个起作用。

带有WeekMenu.js中2个按钮实例的类

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>
            ...

Answer 1

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

Answer 2

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

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


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

Answer 3

同行的解决方案：

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

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

如本例所示：

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

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

3 个答案: