第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

不可變地更新 Redux 狀態(tài)

不可變地更新 Redux 狀態(tài)

繁星淼淼 2023-04-27 10:50:09
我正在一成不變地改變狀態(tài)，但這不起作用?；旧希覄?chuàng)建了一個(gè)函數(shù)來(lái)獲取 excel 文件數(shù)據(jù)。此功能完美運(yùn)行，但當(dāng)我更新狀態(tài)時(shí)，狀態(tài)未更新。任何想法或任何建議與我分享這是我的狀態(tài)：tableData: [], productsData: []這是狀態(tài)更新的減速器：case actionTypes.READ_EXCEL:            var excel1 = [];            var excel2 = [];            const promise = new Promise((resolve, reject) => {                const fileReader = new FileReader();                fileReader.readAsArrayBuffer(action.payload);                fileReader.onload = (e) => {                    const bufferArray = e.target.result;                    const wb = { SheetNames:[], Sheets:{} };                    const ws1 = XLSX.read(bufferArray, {type: "buffer"}).Sheets.Sheet1;                    const ws2 = XLSX.read(bufferArray, {type: "buffer"}).Sheets.Sheet2;                    wb.SheetNames.push("Sheet1");                    wb.Sheets["Sheet1"] = ws1;                                        wb.SheetNames.push("Sheet2");                    wb.Sheets["Sheet2"] = ws2;                    const data1 = XLSX.utils.sheet_to_json(ws1);                    const data2 = XLSX.utils.sheet_to_json(ws2);                    resolve([ data1, data2 ]);                }                fileReader.onerror = (error) => {                    reject(error);                };            })            promise.then((excelData) => {                excel1 = excelData[0];                excel2 = excelData[1];                            });            return {                ...state,                tableData: excel1,                productsData: excel2                }        default:    }    return state; }在獲取狀態(tài)值和狀態(tài)值未更新的 UI 中：const mapStateToProps = (state) => { return {  items: state.tableData,     <---  products: state.productsData    <--- };}
查看完整描述

2 回答

?
湖上湖

TA貢獻(xiàn)2003條經(jīng)驗(yàn) 獲得超2個(gè)贊

新狀態(tài)不會(huì)改變，因?yàn)槟愕?Promise 在 return 語(yǔ)句之后解析，這是因?yàn)?Promise 的性質(zhì)，它不會(huì)阻止你的函數(shù)的執(zhí)行，我建議使用像 redux-thunk 這樣的中間件來(lái)實(shí)現(xiàn)異步邏輯在您的示例閱讀文件中。最后，您將 excel 數(shù)據(jù)傳遞給 reducer 以更新商店。



查看完整回答
反對(duì) 回復(fù) 2023-04-27
?
慕田峪4524236

TA貢獻(xiàn)1875條經(jīng)驗(yàn) 獲得超5個(gè)贊

由于承諾是異步的，因此首先執(zhí)行返回語(yǔ)句，然后將數(shù)據(jù)加載到 excel1 和 excel2 中。


case actionTypes.READ_EXCEL:

            var excel1 = [];

            var excel2 = [];

            /*Below line will create a promise, which will be executed asynchronously. 

            So the execution will not wait until promise is executed.

            It will go to next line which is Promise.then()*/ 


            const promise = new Promise((resolve, reject) => {

                const fileReader = new FileReader();

                fileReader.readAsArrayBuffer(action.payload);

                fileReader.onload = (e) => {

                    const bufferArray = e.target.result;

                    const wb = { SheetNames:[], Sheets:{} };

                    const ws1 = XLSX.read(bufferArray, {type: "buffer"}).Sheets.Sheet1;

                    const ws2 = XLSX.read(bufferArray, {type: "buffer"}).Sheets.Sheet2;


                    wb.SheetNames.push("Sheet1");

                    wb.Sheets["Sheet1"] = ws1;

                    

                    wb.SheetNames.push("Sheet2");

                    wb.Sheets["Sheet2"] = ws2;


                    const data1 = XLSX.utils.sheet_to_json(ws1);

                    const data2 = XLSX.utils.sheet_to_json(ws2);

                    resolve([ data1, data2 ]);

                }

                fileReader.onerror = (error) => {

                    reject(error);

                };

            })

           /*here as well the we're just attaching a callback to promise to be executed after promise is fulfilled. so execution will attach the specified callback (excelData arrow function) to promise.then(). 

           And then execution will move to next line which is return statement.*/ 

            promise.then((excelData) => {

                excel1 = excelData[0];

                excel2 = excelData[1];

                

            });

             /*Now here, as the promises are async and will be executed after the fileReader reads data, the values of excel1 and excel2 are not updated but only contain the empty array. 

            And hence your state will have empty arrays in it*/

            return {

                ...state,

                tableData: excel1,

                productsData: excel2

                }

        default:

    }

    return state; 

}


您可以做一件事，將使用 fileReader 讀取數(shù)據(jù)的代碼編寫到一個(gè)函數(shù)中，該函數(shù)將在您當(dāng)前在代碼中放置 dispatch 語(yǔ)句的位置執(zhí)行。在 promise.then() 中，您可以使用加載的數(shù)據(jù)調(diào)用 dispatch 。所以你的新代碼可能看起來(lái)像這樣


// separate function for reading the data

function readExcel(excelData) {

    return dispatch=>{

    const promise = new Promise((resolve, reject) => {

        const fileReader = new FileReader();

        fileReader.readAsArrayBuffer(excelData);

        fileReader.onload = (e) => {

            const bufferArray = e.target.result;

            const wb = {

                SheetNames: [],

                Sheets: {}

            };

            const ws1 = XLSX.read(bufferArray, {

                type: "buffer"

            }).Sheets.Sheet1;

            const ws2 = XLSX.read(bufferArray, {

                type: "buffer"

            }).Sheets.Sheet2;


            wb.SheetNames.push("Sheet1");

            wb.Sheets["Sheet1"] = ws1;


            wb.SheetNames.push("Sheet2");

            wb.Sheets["Sheet2"] = ws2;


            const data1 = XLSX.utils.sheet_to_json(ws1);

            const data2 = XLSX.utils.sheet_to_json(ws2);

            resolve([data1, data2]);

        }

        fileReader.onerror = (error) => {

            reject(error);

        };

    })

    promise.then((excelData) => {

        excel1 = excelData[0];

        excel2 = excelData[1];

        // Dispatching only after we get the data from fileReader

        dispatch({

            type: actionTypes.READ_EXCEL,

            payload: {

                excel1,

                excel2

            }

        })

      });

   }

}


// In reducer function

case actionTypes.READ_EXCEL:

    return {

        ...state,

        tableData: action.payload.excel1,

        productsData: action.payload.excel2

    }


查看完整回答
反對(duì) 回復(fù) 2023-04-27
  • 2 回答
  • 0 關(guān)注
  • 172 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)