如何將狀態傳遞給React.js中的操作？

我在組件中有一些狀態，我想傳遞給React.js中的動作。我怎樣才能做到這一點？如何將狀態傳遞給React.js中的操作？

mycomponent.js

cityHandleUpdateInput() { 
    this.setState({ 
     city: this.refs.city.refs.searchTextField.input.value 
    }) 
    const { city } = this.state; 
    this.props.fetchResCity(city) 
}

myaction.js

export const fetchResCity = (city) => (dispatch, getState) => { 
if (!getState().resCity.isFetching) { 
    console.log(getState().city) 
    console.log(city) 
    const endpoint = 'rescity?city=${city}'; 
    dispatch({ 
     [CALL_API]: { 
      types: [ RES_CITY_REQUEST, RES_CITY_SUCCESS, RES_CITY_FAILURE ], 
      endpoint: endpoint 
     } 
    }) 
    } 
}

它不工作。我的代碼有問題嗎？當我在我的動作中記錄城市變量時，它只是undefined。

來源

2017-02-20 kazuyahiko

它是否正確登錄cityHandleUpdateInput –

我認爲setState需要時間來更新狀態。你能否在fetchCity函數中傳遞'this.refs.city.refs.searchTextField.input.value' –

你應該使用setState回調即以正確的方式來處理狀態突變，因爲setState需要時間的變異狀態，因此在更新狀態後立即使用狀態可能會導致較舊的值而不是更新的值。

。利用回調像

cityHandleUpdateInput() { 
    this.setState({ 
     city: this.refs.city.refs.searchTextField.input.value 
    },() => { 
     const { city } = this.state; 
     this.props.fetchResCity(city) 
    }) 
}

確保您在constructor或綁定cityHandleUpdateInput功能，其中它被調用或否則它本身將無法訪問setState與this.setState

來源

2017-02-20 06:04:55

setState將不會立即更新this.state。下面是從React docs的解釋：

setState()不會立即發生變異this.state但創建待狀態轉變。調用此方法後訪問this.state可能會返回現有值。

無法保證對setState的呼叫進行同步操作，並且可能會調用調用以提高性能。

這意味着您需要將您傳遞的值存儲到setState，並將其傳遞給動作創建者。像這樣的東西（我沒有運行此代碼，請確保您測試）應該工作：

cityHandleUpdateInput() { 
    const city = this.refs.city.refs.searchTextField.input.value; 
    this.setState({ city }); 
    this.props.fetchResCity(city); 
}

來源

2017-02-20 03:41:58 jergason

如何將狀態傳遞給React.js中的操作？

回答

相關問題