亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

頁面刷新后 React 不會重新渲染組件,即使狀態發生變化

頁面刷新后 React 不會重新渲染組件,即使狀態發生變化

瀟瀟雨雨 2021-09-30 19:29:12
我有一個非常奇怪的問題。我的意思是,對我來說,真的。這不是某種“使用 setState 而不是 this.state”的問題。我正在開發旅行計劃應用程序。我正在使用 ContextAPI,它為整個應用程序提供登錄信息和用戶數據(記錄的用戶行程等)?!皶r間表”組件,顯示每天的行程時間表是上下文訂閱者?,F在我想刪除其中一個行程天數(天,也訂閱上下文是由 Schedule 組件在 Schedule 列表中呈現的組件)。然后魔法發生了:當我登錄應用程序后立即執行此操作時,一切正常。但是當我刷新頁面并刪除另一天時,上下文狀態(正如我所說,包含所有數據,包括日程列表中的天數)更改(通過開發人員工具檢查)但日程組件不會重新呈現本身,所以刪除的元素仍然可見。但是正如我所說,狀態會發生變化,并且在刪除操作之前沒有頁面刷新,一切正常。此外,當我切換到另一個選項卡時(Schedule 只是其中一個選項卡,我在導航欄呈現 Costs 和 Notes 組件上有例如 Costs 和 Notes 選項卡),然后返回 Schedule 選項卡,它會重新呈現和所有內容看起來不錯,組件根據上下文狀態顯示信息。代碼是這樣工作的:刪除(上下文函數)由 Day.js(上下文訂閱者)中的刪除圖標點擊觸發,Day.js 由 Schedule.js(上下文訂閱者)呈現。在 Context.js 中... context functions ...    //WRAPPER FOR DELETE FUNCTIONS    delete(url, deleteFunc) {        this.requestsApi.request(url, "DELETE", null)        .then(response => {            if(response.status===204) {                deleteFunc();            } else {                this.toggleRequestError(true);            }        })        .catch( err => {            console.log(err);            this.toggleRequestError(true);        });    }    deleteDay = (id, tripId) => {        let newTrip = this.state.userData.trips.find((trip => trip.id ===          tripId));        newTrip.days = newTrip.days.filter(day => day.id !== id)        this.updateTrip(newTrip);    }    updateTrip = (newTrip) => {        let trips = this.state.userData.trips;任何人都知道發生了什么以及為什么在頁面刷新后刪除完成后無法重新呈現計劃?即使上下文狀態發生變化?我現在唯一的想法是這是某種錯誤......//UPDATE 在 Schedule 組件中,在函數 componentWillReceiveProps() 我控制臺日志 props.context.trip[0].day[0] - 第一天。它不是一個對象,只是純文本,因此“當我在控制臺中單擊它時”不會對其進行評估。在我刪除它之前,控制臺會記錄第一項。在我刪除它之后,控制臺記錄第二個項目(所以現在它是列表中的第一個項目)所以給 Schedule 的道具正在改變,但沒有觸發渲染......那里到底發生了什么?//UPDATE 2 我還注意到,當我從另一個組件切換到 Schedule 組件時,效果很好(例如,我正在刷新 /costs 端點上的頁面,然后單擊導航欄菜單上的 Schedule 選項卡,這會導致 /schedule)。但是當我在 /schedule 端點上刷新頁面時,會發生此“錯誤”并且組件不會重新呈現。
查看完整描述

1 回答

  • 1 回答
  • 0 關注
  • 860 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號