问题描述
喜欢这个 rendered first page image
当你点击添加按钮时,一行被删除,当你点击应用按钮时, 仅将修改后的值发送到服务器。
我想要做的是点击添加按钮,点击应用按钮,如果该行为空,我会专注于该行
首先,该功能运行良好。但是我想知道它下面的所有孩子都重新渲染是否正常
红色方块是重新渲染所有子组件的部分。
It's the profiler when i hit the delete button
Table.js
function Tables({}){
const rows = useSelector( state =>state.phoneData.data.rows);
const refs = useMemo( ()=> new Array(rows.length).fill().map(()=>new Array(8).fill().map(()=>createRef())),[rows.length]);
return(
<StyledTable>
<Row key={`top_row_head`} top />
{rows.map( (row,i) =>
<Row ref={refs[i]} key={`row_body_${row.id}`} rowId={row.id}/>
)}
</StyledTable>
);
}
Row.js
const Row = forwardRef(({top,rowId,children},ref) =>{
console.log("row");
const dispatch = usedispatch();
const handleDeleteButton = useCallback( (id) => {
dispatch(phoneDataUpdate.Delete(id));
},[]);
if( top ) return(
<StyledRow>
<DeleteButton top/>
{columns.map((column)=>
<Column key={`head_${column.name}`} width={column.width} top>
{column.name}
</Column>
)}
</StyledRow>
);
return(
<StyledRow >
<DeleteButton onClick={()=>handleDeleteButton(rowId)}> delete </DeleteButton>
{columns.map((column,index)=>
<Column key={`row_${rowId}_${column.name}`} width={column.width} textalign={column.textalign}>
<Input ref={ref[index]} colIndex={index} id={rowId} column={column} />
</Column>
)}
</StyledRow>
);
});
Reducer.js
const PHONE_DATA = 'phoneData/PHONE_DATA';
const PHONE_DATA_LOADING = 'phoneData/PHONE_DATA_LOADING';
const PHONE_DATA_SUCCESS = 'phoneData/PHONE_DATA_SUCCESS';
const PHONE_DATA_ERROR = 'phoneData/PHONE_DATA_ERROR';
const PHONE_DATA_ADD = 'phoneData/PHONE_DATA_ADD';
const PHONE_DATA_DELETE = 'phoneData/PHONE_DATA_DELETE';
const PHONE_DATA_CHANGE = 'phoneData/PHONE_DATA_CHANGE';
const PHONE_DATA_UPDATE_LIST_CHANGE = 'phoneData/PHONE_DATA_UPDATE_LIST_CHANGE';
const PHONE_DATA_UPDATE_LIST_DELETE = 'phoneData/PHONE_DATA_UPDATE_LIST_DELETE';
const dataInitRow = {
id:null,model_name:null,machine_name:null,shipping_price:null,maker:null,created:null,battery:null,screen_size:null,storage:null,};
const dataInit = {
lastId:null,rows:[],}
const initialState = {
state:{
loading:false,error:false,},data:dataInit,// refData:[],firstData:dataInit,datachangelist:{
dataAddList:[],dataDeleteList:[],dataUpdateList:[],};
// get Data From Server promisethunk
const phoneDataFetchAsync = createPromiseThunk(PHONE_DATA,restAPI.getAllPhoneInfo);
const phoneDataUpdate =({
Add:()=>({
type:PHONE_DATA_ADD,}),Delete:(id)=>({
type:PHONE_DATA_DELETE,id: id,Change:(id,colName,value)=>({
type:PHONE_DATA_CHANGE,colName:colName,value: value,});
// const phoneDataAddRef=(length) =>({
// type:PHONE_DATA_ADD_REF,// length,// });
const phoneDataUpdateList = ({
Change:(id,value) => ({
type:PHONE_DATA_UPDATE_LIST_CHANGE,colName: colName,Delete:(id,colName) => ({
type:PHONE_DATA_UPDATE_LIST_DELETE,});
////////////////////////////////////////////////////////
export default function phoneData(state = initialState,action){
// console.log(`add: ${state.datachangelist.dataAddList},delete: ${state.datachangelist.dataDeleteList},change: ${state.datachangelist.dataUpdateList}`);
switch(action.type){
case PHONE_DATA_LOADING:
case PHONE_DATA_SUCCESS:
case PHONE_DATA_ERROR:
return handleAsyncActions(PHONE_DATA)(state,action);
////////////////////////////////////////////////////////////////////////////////////////////////////////////
case PHONE_DATA_ADD:
return{
...state,data:{
...state.data,lastId: state.data.lastId +1,rows: state.data.rows.concat({
...dataInitRow,id: state.data.lastId +1,datachangelist:{
...state.datachangelist,dataAddList: state.datachangelist.dataAddList.concat( state.data.lastId +1),}
};
case PHONE_DATA_DELETE:
const dataAddListIdx = state.datachangelist.dataAddList.findindex( val => val === action.id);
console.log("deleteRow",action);
return{
...state,// refData:state.refData.filter(row => row.id !== action.id),rows:state.data.rows.filter(row => row.id !== action.id),dataAddList: dataAddListIdx === -1
? state.datachangelist.dataAddList
: state.datachangelist.dataAddList.filter(id => id !== action.id),dataDeleteList: dataAddListIdx === -1
? state.datachangelist.dataDeleteList.concat(action.id)
: state.datachangelist.dataDeleteList,};
////////////////////////////////////////////////////////////////////////////////////////////////////////////
case PHONE_DATA_UPDATE_LIST_CHANGE:
return produce(state,draft =>{
const idx = state.datachangelist.dataUpdateList.findindex( row => row.id === action.id);
if( idx === -1 ){
let initRow = {};
initRow.id = action.id;
initRow[action.colName] = action.value;
draft.datachangelist.dataUpdateList.push(initRow);
}else if( action.value !== state.datachangelist.dataUpdateList[idx][action.colName]){
draft.datachangelist.dataUpdateList[idx][action.colName] = action.value;
}
});
case PHONE_DATA_UPDATE_LIST_DELETE:
return produce(state,draft=>{
const idx = state.datachangelist.dataUpdateList.findindex( row => row.id === action.id);
if( idx !== -1){
if( Object.keys(draft.datachangelist.dataUpdateList[idx]).length <= 1 ){
draft.datachangelist.dataUpdateList.splice(idx,1);
}
}
});
default:
return state;
}
}
export {phoneDataFetchAsync,phoneDataUpdate,phoneDataUpdateList,};
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)