Question

我的组件中有一些状态，我想传递给一个动作在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。

Answer 1

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);
}

Answer 2

您应该使用setState回调，即处理状态突变的正确方法，因为setState需要时间来改变状态，因此在更新状态后立即使用状态可能导致更旧价值，而不是更新的价值。

使用像

这样的回调

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

确保您绑定了cityHandleUpdateInput中的constructor函数或其被调用的位置，否则它本身将无法使用{{1}访问setState }}

如何将状态传递给React.js中的操作？

2 个答案: