当mapStateToProps被更新并且props在项目组件中不被接受时,项目未呈现;如果使用Combinereducer,则该项目有效,但没有CombineReducer,则该项目无法呈现
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);
答案 0 :(得分:0)
在这些行中:
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);