状态更改后状态不会触发重新渲染

Question

我在我的 React 应用程序中组合了两个减速器。其中之一工作正常，但在状态更改后没有触发重新渲染。但是在我保存文档或更改其他减速器状态后，组件会为两个减速器重新呈现

减速器不能正常工作：

import {
  SET_ACTIVE_SUBJECT,
  SET_ACTIVE_TOPIC
} from '../action/action-types'

const initialState = {
   activeSubject: '',
   activeTopic: ''
}

const makeState = (stateActiveSubject, stateActiveTopic) => {
   return {
      activeSubject: stateActiveSubject,
      activeTopic: stateActiveTopic
   }
}


export const uireducer = (state = initialState, action) => { 
    switch(action.type){
        case SET_ACTIVE_SUBJECT:
            // this statement is printing new state in console, but not triggering re-render
            console.log('New State : ', makeState(action.payload,''));  
            return makeState(action.payload,'')
        case SET_ACTIVE_TOPIC:
            return makeState(state.uireducer.activeSubject,action.payload)
        default:
            return state
     }
}

未重新渲染的组件：

const Topics = ({activeSubject, data}) => {

const classes = useStyles()
const [topics, setTopics] = useState([])
useEffect(() => {
    console.log('Active Subject : ', activeSubject);
    if(activeSubject){
        console.log('Data : ', data.filter(subject => (subject.id === activeSubject))[0].topics);
        setTopics(data.filter(subject => (subject.id === activeSubject))[0].topics)
    }
}, [])

return (
        <List>
            {
               topics.length > 0 ? topics.map(topic => {
                   return (
                       <ListItem button className={classes.listItem} id={topic.id} key={topic.id}>
                           {topic.name}
                           <ButtonGroup className={classes.editDelete}>
                                <IconButton className={classes.icon}>
                                    <Edit />
                                </IconButton>
                                <IconButton className={classes.icon}>
                                    <Delete />
                                </IconButton>
                           </ButtonGroup>
                       </ListItem>
                   )
               }) : <div className={classes.waitMessage}><p>Select Subject To Display Topics</p></div>
            }
        </List>
)
}

const mapStateToProps = state => ({
    activeSubject: state.uireducer.activeSubject,
    data: state.subjects.data
})

const mapDispatchToProps = dispatch => ({

})

export default connect(mapStateToProps, mapDispatchToProps)(Topics);

工作正常的减速器：

import {
  FETCHING_DATA,
  FETCHED_DATA,
  FETCH_DATA_ERROR
} from '../action/action-types'

const initialState = {
  isDataFetching : false,
  error: '',
  data: [],
}

const makeState = (dataFetching, stateError, stateData) =>  {
   return {
      isDataFetching: dataFetching,
      error: stateError,
      data: stateData,
   }
}

export const reducer = (state = initialState, action) => {
   switch(action.type){
      case FETCHING_DATA:
          return makeState(true,'',[])
      case FETCHED_DATA:
          return makeState(false,'',action.payload)
      case FETCH_DATA_ERROR:
          return makeState(false,action.payload,[])
      default:
         return state
    }
 }

保存在这里：

import { createStore, combineReducers, applyMiddleware } from 'redux'
import thunk from 'redux-thunk';
import {reducer}  from '../reducer/reducer'
import { uireducer } from '../reducer/uireducer'

console.log(reducer);

const rootReducer = combineReducers({
   subjects: reducer,
   uireducer
})

const store = createStore(rootReducer, applyMiddleware(thunk))

export default store

Answer 1

将 activeSubject 设置为 useEffect 的依赖项，以便在值更改时重新运行。

useEffect(() => {
  // ...
}, [activeSubject])

状态更改后状态不会触发重新渲染

State is not triggering re-render after change in state

javascript

reactjs

redux

react-redux

react-state