组件不根据 react-redux 中的状态变化进行渲染答案

【问题标题】：Component does not render based on state change in react-redux组件不根据 react-redux 中的状态变化进行渲染
【发布时间】：2019-05-23 14:49:17
【问题描述】：

当 mapStateToProps 更新并且项目组件中不接受 props 时，项目不渲染，如果使用 combinereducers 它可以工作，但没有 combinereducers，项目不会渲染

 reducer.js

这是我的减速器，我在其中保持状态，但它在此处更新，但在项目组件中，它的渲染状态已更新

   export const initialState={
    rows:[],
    projectformvalue:{
    projectname:"",
    companyname:"",
    description:"",
    estimationcost:"",
  },
  tabledisplay:false,
  open:true,
}
const reducer=(state=initialState,action)=>{
  const newState={...state};
  if(action.type==='CHANGE'){
     return {...state, projectformvalue:{...state.projectformvalue, [action.payload.name]:action.payload.value}}
  } 
   else if(action.type==='SAVE'){
     let temp = state.rows;
     console.log(state.projectformvalue);
     temp.push(state.projectformvalue);
     return {...state, "rows": temp}
      //newState.rows.push({ ...newState.projectformvalue});
   }
  return newState;
}
export default reducer;

  project.js 

         import React,{Component}from 'react';
         import Actions from './Actions';
         import {connect} from 'react-redux';
        class Project extends Component{



            render(){
               let {rows} = this.props.states;
               console.log(rows);
            return(
                <div className="employeeRegister">
                    <Actions/>
                <table>
                   <thead>
                       <tr>
                       <th>Project Name</th>
                       <th>Company Name</th>
                       <th>Description Name</th>
                       <th>Estimation Cost</th>
                       <th>Actions</th>
                       </tr>
                   </thead>
                   <tbody>
                   {rows.map(tablerows=>{
                       return (
                        <tr key={Math.random()}>
                           <td>{tablerows.projectname}</td>
                           <td>{tablerows.companyname}</td>
                           <td>{tablerows.description}</td>
                           <td>{tablerows.estimationcost}</td>
                           <td>
                               <button onClick={()=>this.props.handleEdit()}>Edit</button>
                           </td>
                       </tr>
                       )
                    })} 
                  </tbody>
               </table>
               </div> 
            )
        }
        }
        const mapStateToProps=(state)=>{
            console.log(state);
            return { states:state.rows }
            }
        export default connect(mapStateToProps)(Project);

【问题讨论】：

状态更新是否正确？
@HarishSoni 是的状态正在更新
日志是否在渲染中工作？
没有日志不渲染
确保您的 states 包含一个名为 rows 的数组，并在渲染中使用 const 而不是 let：const { rows } = this.props.states;

标签： reactjs redux

【解决方案1】：

在那些行中：

let temp = state.rows;
 console.log(state.projectformvalue);
 temp.push(state.projectformvalue);

你不小心改变了state.rows（改变状态会阻止react在组件改变时重新渲染组件）。你应该像这样制作一个浅拷贝：

let temp = [...state.rows]; // This won't mutate the old state.rows
 console.log(state.projectformvalue);
 temp.push(state.projectformvalue);

【讨论】：