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

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

為什么在使用 thunk 時(shí)會(huì)以錯(cuò)誤的順序調(diào)用我的動(dòng)作創(chuàng)建者?

為什么在使用 thunk 時(shí)會(huì)以錯(cuò)誤的順序調(diào)用我的動(dòng)作創(chuàng)建者?

神不在的星期二 2023-10-14 11:16:18
我正在嘗試 redux-thunk 和動(dòng)作創(chuàng)建者,并注意到一些我不理解的奇怪行為。當(dāng)我調(diào)用動(dòng)作創(chuàng)建器函數(shù)時(shí),它們不會(huì)按照我希望的順序調(diào)用。這是我的 App.js 組件class App extends Component {  handleSave = () => {    this.props.postData({      name:this.props.activity,      type_name: this.props.type    })    this.props.fetchList()    this.props.fetchData()  }  handleClick = () => {    this.props.fetchData()  }  componentDidMount() {    this.props.fetchData()    this.props.fetchList()  }  render() {    return (      <div className="App">        <Router>          <Nav />          <Route exact path='/' render={props => <Home {...props} clickProp={this.handleClick} saveProp={this.handleSave}/>} />          <Route exact path='/activities' render={props => <ListContainer {...props} numItems={this.props.list.length} listProp={this.props.list}/>} />        </Router>      </div>    );  }}const mapStateToProps = state => {  return {    activity: state.activity,    type: state.type,    list: state.list  }}const actions = {fetchData, fetchList, postData}export default connect(mapStateToProps, actions)(App);當(dāng)我單擊 Home 子組件中的按鈕時(shí),將調(diào)用 handleSave 函數(shù),然后該函數(shù)應(yīng)該將一個(gè)項(xiàng)目發(fā)布到我的列表中,然后獲取更新的列表,以便它可以顯示在我的列表中。當(dāng)我這樣做時(shí), this.props.fetchList() 首先被調(diào)用,即使它是第二個(gè)被調(diào)用的函數(shù)。我在我的減速器中放置了一個(gè) console.log(action) ,這就是打印的內(nèi)容。{type: "FETCH_LIST", payload: Array(86)}{type: "POST_DATA", payload: {…}}{type: "FETCH_DATA", payload: {…}}我可以讓 FETCH_LIST 在 POST_DATA 之后發(fā)生的唯一方法是如果我像這樣第二次調(diào)用 fetch_data()  handleSave = () => {    // something weird going on here    this.props.fetchList()    this.props.postData({      name:this.props.activity,      type_name: this.props.type    })    this.props.fetchList()    this.props.fetchData()  }如果可能的話,我真的希望能夠讓我的代碼正常工作,而不必兩次調(diào)用同一個(gè)函數(shù)。最后,這就是我的動(dòng)作創(chuàng)建者的樣子。export default function fetchData() {  return (dispatch) => {    const url = 'http://www.boredapi.com/api/activity/'    fetch(url)      .then(res => res.json())      .then(activity => { dispatch({type: "FETCH_DATA", payload: activity})})  }}我唯一的猜測(cè)是,發(fā)生這種情況是因?yàn)檫@些操作是異步的。所以我也嘗試改變這些函數(shù)的調(diào)用順序,無(wú)論什么 FETCH_LIST 總是發(fā)生在 POST_DATA 之前。
查看完整描述

1 回答

?
BIG陽(yáng)

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

您可以將這些操作創(chuàng)建者轉(zhuǎn)換為async版本,然后您可以等待它們,以便它們按順序執(zhí)行。


https://medium.com/@gaurav5430/async-await-with-redux-thunk-fff59d7be093


例如在你的fetchData


function fetchData() {

  return async (dispatch) => {

    const url = 'http://www.boredapi.com/api/activity/'


    try{

      const res = await fetch(url)

      const activity = await res.json();

      dispatch({type: "FETCH_DATA", payload: activity})

    }

    catch (error) {

      console.log(error);

    }

}

一旦它們出現(xiàn),async您就可以在您的中等待它們handleSave(一旦您將其轉(zhuǎn)換為async),這將確保它們按順序被調(diào)用。


handleSave = async () => {

    await this.props.postData({

      name:this.props.activity,

      type_name: this.props.type

    })

    await this.props.fetchList()

    await this.props.fetchData()

  }


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

添加回答

舉報(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)