React.js - 如何在另一個完成後調用setState函數

我必須在這裏丟失一些明顯的東西。我有一個待辦事項列表應用程序，它使用一個函數來創建新列表。一旦調用createList，我想通過將其selected支柱設置爲true來突出顯示列表。因此，以下是執行此操作的兩種方法。我試圖一個接一個地打電話。他們都使用適當的回調修改狀態，使用prevState，但不管什麼原因，createList不會在toggleSelected被調用之前將狀態設置爲新狀態，因此listName在toggleSelected中未定義。無論如何要確保在調用toggleSelected之前將新列表對象設置爲狀態？我應該使用Redux，但我不想爲我的第一個React應用程序進入。React.js - 如何在另一個完成後調用setState函數

createList = (listName) => { 
    const lists = {...this.state.lists}; 
    lists[listName] = { 
    listName: listName, 
    selected: false, 
    todos: {} 
    }; 

    this.setState(prevState => { 
    return {lists: prevState.lists}; 
    }); 
}; 

toggleSelected = (listName) => { 
    let selected = this.state.lists[listName].selected; 
    selected = !selected; 
    this.setState(prevState => { 
     return { 
     bookLists: update(prevState.lists, {[listName]: {selected: {$set: selected}}}) 
     }; 
    }); 
};

兩種方法調用另一個組件，像這樣的onSubmit處理器與新的列表名稱後被傳遞：

this.props.createList(newListName); 
this.props.toggleSelected(newListName);

PS - 如果你想知道這是怎麼回事用update()，它是從一個不變性輔助插件，允許在狀態對象中輕鬆設置嵌套值（在這種情況下，state.lists[listName].selected） - 我可能應該使用Redux的另一個原因。

PPS - 我意識到我可以從creatList開始將新列表的selected道具設置爲true，但應用程序還有更多內容，我需要在創建後對其進行設置。

來源

2017-08-22 Andrew Jensen

不要做你的toggleSelected做什麼，現在，而不是切換清單中的selected標誌（不提取它），然後讓你的組件知道你重新綁定生成的對象lists數據更新：

class YourComponent { 
    ... 
    toggleSelected(listName) { 
    let lists = this.state.lists; 
    let list = lists[listName]; 
    list.selected = !list.selected; 
    this.setState({ lists }); 
    } 
    .. 
}

然後確保在渲染功能，在您爲每個列表中的用戶界面中，檢查是否selected是真的還是假的，所以你可以設置相應的classNames字符串。

（另請注意，在你的代碼中，您使用selected = !selected，這是不會做太多，因爲你提取一個布爾值，翻轉，然後沒有保存回那裏可以請參考其他代碼）

來源

2017-08-22 16:41:33

感謝您的答覆！快速問題：你是什麼意思'toggleSelected'是生成組件？從我看到的，它只是更新狀態與翻轉'選擇'（這種方法一直在應用程序的其他部分按預期工作）。 –

我可能誤解了你的setState做了什麼，你沒有將它傳遞給一個狀態和一個回調函數，而只是一個函數（這可能是一個新的setState方法被調用，到目前爲止我所使用的所有代碼是'this.setState（stateobj，callbackwhenupdated）'）。 –

啊，不。 'setState'的第一個參數可以是具有以下簽名的更新函數：'（prevState，props）=> stateChange''。根據我的理解，這是更新狀態的正確方法：由於setState是asnyc，所以'prevState'將在任何其他方法改變之後返回狀態。 –

該問題不在第二個setState函數中。它位於toggleSelected（）方法的第一行。

執行toggleSelected（）方法時，第一個setState尚未執行。

在您的代碼的流程是：

createList（）;
toggleSelected（）;
setState（）in createList（）;
setState（）in toggleSelected（）;

解決方法1：使用等待和異步關鍵字

解決方案2：使用 redux的

來源

2017-08-22 19:36:10

React.js - 如何在另一個完成後調用setState函數

回答

相關問題