即使商店状态正在改变，UI 也不会重新渲染？

Question

我有这个主要组件，它通过 connect 方法连接到 redux 商店。

我还使用记录器中间件来检查存储状态，因为它逐渐更改，从那里我可以看到存储正在成功更新，但它连接的组件没有重新呈现。

请帮忙....

我几乎尝试了所有方法，包括使用 Object.assign({})、展开操作，还尝试使用 componentWillReceiveProps(nextProps)，但 ui 仍然没有更新。

这是主 app.js 文件：

import React from 'react'
import { render } from 'react-dom'
import App from './MainComponent'

import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
import { Provider } from 'react-redux'
import thunk from 'redux-thunk'
import { reactReduxFirebase, getFirebase, firebaseReducer } from 'react-redux-firebase';
import firebase from './fbConfig'
import usersReducer from './reducers/usersReducer'
import logger from 'redux-logger'


// const rootReducer = combineReducers({
//     firebase: firebaseReducer,
// });

const data = window.data;

delete window.data;

const store = createStore(usersReducer, data, applyMiddleware(logger(), thunk));

store.subscribe(() => {
    // console.log("Store State : " + JSON.stringify(store.getState()));
});

render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById("root")
)

数据在哪里

{"users":[{"key":1,"value":{"employeeID":1,"firstName":"Siddharth Kilam","mobileNumber":"+919987792049","adminName":"Sid Kilam","adminID":36,"profileName":"default","profileID":4,"explicitLogin":1,"locRow":{"timestamp":"2019-04-09 09:15:05","lat":28.4453983,"lon":77.1012133,"eventTypeID":9,"employeeID":1},"attendanceRow":{"timestamp":"2019-04-09 09:05:39","lat":28.4453983,"lon":77.1012133,"eventTypeID":8,"employeeID":1},"workingStatus":{"code":0,"reason":"Normal Day","shifts":[{"startTime":"2019-04-11T04:34:00.000Z","endTime":"2019-04-11T12:34:00.000Z"}]},"offlinePeriod":3600000,"status":"Inactive"}},{"key":145,"value":{"employeeID":145,"firstName":"SidKilam2 Motorola","mobileNumber":"9599936991","adminName":"Sid Kilam","adminID":36,"profileName":"default","profileID":4,"explicitLogin":1,"locRow":{"timestamp":"2019-04-03 12:20:16","lat":28.4455203,"lon":77.101336,"eventTypeID":9,"employeeID":145},"attendanceRow":{"timestamp":"2019-04-02 23:01:27","lat":28.4747009,"lon":77.0989274,"eventTypeID":9,"employeeID":145},"workingStatus":{"code":0,"reason":"Normal Day","shifts":[{"startTime":"1999-12-31T18:30:00.000Z","endTime":"2000-01-01T18:29:59.000Z"}]},"offlinePeriod":3600000,"status":"Offline"}}]};

reducer 文件是

const GET_TASKS = 'get tasks'

export default (state = {}, action) => {
  switch (action.type) {
    case GET_TASKS:

      // return state.usersList.map(emp => {
      //   return Object.assign({}, emp.value, {
      //     firstName : "Neeraj Kumar Bansal"
      //   })
      // });

      return { ...state,  tasks : action.tasks }

    default:

      return state;
    }
 }

动作文件是

import database from '../fbConfig'

 /**
* ACTION TYPES
*/
const GET_TASKS = 'get tasks'

/**
* ACTION CREATORS
*/
export const getTasks = (tasks) => ({type: GET_TASKS, tasks})

/**
* THUNKS
*/
export function getTasksThunk() {
 return dispatch => {
 const tasks = [];
 database.ref(`/tasks/145/2019-01-14`).once('value', snap => {

  // console.log("Called ......................");

  snap.forEach(data => {
  let task = data.val();
  tasks.push(task)
  })

  // console.log("Tasks Fetched" + tasks);

 })
 .then(() => dispatch(getTasks(tasks)))
 }
}

UI 组件是：

import React, { Component } from 'react';
import { connect } from 'react-redux'
import { firebaseConnect } from 'react-redux-firebase'
import { compose } from 'redux'
import MapView from './components/map/MapView'
import MapComponents from './components/map/MapComponents';
import TasksSidebar from './components/map/TasksSidebar';
import { getTasksThunk } from './thunks/getTasksThunk'

class App extends Component {

  render() {

    // console.log("Props From Main Component : " + JSON.stringify(this.props.users));

    const { users } = this.props;
    // const { tasks } = this.state;

    console.log("Users From Main Component : " + users);
    // console.log("Tasks From Main Component : " + tasks);

    return (
      <div>
        <MapComponents users={users} />
        <TasksSidebar />
        <MapView users={users}/>
      </div>
    );
  }
}

// export default compose(
//   firebaseConnect((props) => {
//     return [
//       'Tasks'
//     ]
//   }),
//   connect(
//     (state) => ({
//       tasks: state.firebase.data.Tasks,
//       // profile: state.firebase.profile // load profile
//     })
//   )
// )(App)

const mapStateToProps = function(state) {
  console.log("Map State to props : " + state);
  return {
    users : state.users,
    tasks : state.tasks
  }
}

const mapDispatch = dispatch => {
  dispatch(getTasksThunk())
  return {

  }
 }

export default connect(mapStateToProps, mapDispatch)(App);

UI 应该随着商店状态的变化而重新呈现......

Answer 1

使用静态 getDerivedStateFromProps 生命周期组件。在每次重新渲染时执行。

你可以检查那里的条件，如果没有变化就返回 null 否则更新那里的状态。在从 props 中 getDerived 状态中，您可以通过返回一个对象来设置状态。 setState 函数在这里不起作用，因为它是一个静态方法。请参考此链接https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops

// alter your store and reducer file
const store = createStore(usersReducer, applyMiddleware(logger(), thunk));

const GET_TASKS = 'get tasks';
const initialState = {
   users: [{"key":1,"value":{"employeeID":1,"firstName":"Siddharth Kilam","mobileNumber":"+919987792049","adminName":"Sid Kilam","adminID":36,"profileName":"default","profileID":4,"explicitLogin":1,"locRow":{"timestamp":"2019-04-09 09:15:05","lat":28.4453983,"lon":77.1012133,"eventTypeID":9,"employeeID":1},"attendanceRow":{"timestamp":"2019-04-09 09:05:39","lat":28.4453983,"lon":77.1012133,"eventTypeID":8,"employeeID":1},"workingStatus":{"code":0,"reason":"Normal Day","shifts":[{"startTime":"2019-04-11T04:34:00.000Z","endTime":"2019-04-11T12:34:00.000Z"}]},"offlinePeriod":3600000,"status":"Inactive"}},{"key":145,"value":{"employeeID":145,"firstName":"SidKilam2 Motorola","mobileNumber":"9599936991","adminName":"Sid Kilam","adminID":36,"profileName":"default","profileID":4,"explicitLogin":1,"locRow":{"timestamp":"2019-04-03 12:20:16","lat":28.4455203,"lon":77.101336,"eventTypeID":9,"employeeID":145},"attendanceRow":{"timestamp":"2019-04-02 23:01:27","lat":28.4747009,"lon":77.0989274,"eventTypeID":9,"employeeID":145},"workingStatus":{"code":0,"reason":"Normal Day","shifts":[{"startTime":"1999-12-31T18:30:00.000Z","endTime":"2000-01-01T18:29:59.000Z"}]},"offlinePeriod":3600000,"status":"Offline"}}],
   tasks: []
}

export default (state = initialState, action) => {
  switch (action.type) {
    case GET_TASKS:
      return { ...state,  tasks : action.tasks }

    default:
      return state;
  }
}

import React, { Component } from 'react';
import { connect } from 'react-redux'
import { firebaseConnect } from 'react-redux-firebase'
import { compose } from 'redux'
import MapView from './components/map/MapView'
import MapComponents from './components/map/MapComponents';
import TasksSidebar from './components/map/TasksSidebar';
import { getTasksThunk } from './thunks/getTasksThunk'

class App extends Component {

  constructor(){
    super();
    this.state = {
      users: []
    }
  }

  static getDerivedStateFromProps(props, state){

     if(props.users !== state.users){
        return {
           users: props.users    // This will update the props value for users in state
        }
     }

     return null;
  }

  render() {

    // console.log("Props From Main Component : " + JSON.stringify(this.props.users));

    const { users } = this.state;
    // const { tasks } = this.state;

    console.log("Users From Main Component : " + users);
    // console.log("Tasks From Main Component : " + tasks);

    return (
      <div>
        <MapComponents users={users} />
        <TasksSidebar />
        <MapView users={users}/>
      </div>
    );
  }
}

const mapStateToProps = function(state) {
  //console.log("Map State to props : " + state);
  return {
    users : state.users,
    tasks : state.tasks
  }
}

const mapDispatch = dispatch => {
  dispatch(getTasksThunk())
  return {

  }
 }

export default connect(mapStateToProps, mapDispatch)(App);