如何将状态传递给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中的操作？

回答

相关问题