无法在函数内同时调度2个操作

Question

通过我的Picker组件的onValueChange函数，我用setState为状态设置了新的值，然后我调用getOperators函数，以便从redux中分派两个不同的动作来保存状态到全局存储。但我不能同时dispatch两个actions。我要分享我的代码。我注释掉了导致问题的writeProduct操作。通过这种方式，只需使用checkTokenAndFetch操作，一切都可以正常工作。但是，我需要以某种方式将我的selectedProductID保存到redux，因为我在其他组件中需要这个ID。

下面是我设置selectedProductID状态并调用getOperators方法的Picker组件。

<Picker  style={{width: width-40,  marginTop: 20, marginLeft: 20, marginRight: 20, alignItems: 'center', borderWidth: 1, justifyContent: 'flex-start', borderColor: '#D3D3D3'}}
         selectedValue={this.state.selectedProductID}
         onValueChange={(id)=>this.setState({selectedProductID: id,visible: true},()=>this.getOperators())}
>
    {
        this.state.products.map((product, i) => {
            return(
                <Picker.Item label={product.name} value={product.id} key={i}/>
            );
        })
    }
</Picker>

这是我的getOperators方法。我注释掉了发送writeProduct操作的代码行，因为这就是问题所在。

getOperators(){
    const { dispatch } = this.props;
    console.log("selectedProductID: ",this.state.selectedProductID);
    if(this.state.products.length>0){
        dispatch(authActions.writeProduct(this.state.selectedProductID));
        url = 'https://------------------?product=' + this.state.selectedProductID;
        requestOptions = {
            method: 'GET',
            headers: {
                'Authorization': 'Bearer ' + this.props.token
            }
        };

        dispatch(authActions.checkTokenAndFetch(url, requestOptions))
            .then((data) => {
                console.log("GET OPERATORS: ",data);
                this.setState({operators: data.data, selectedProduct:  data.data[0].productName,visible: false},()=>console.log("States After fetch: ",this.state));
            },
              (error)=>{
                console.log(error);
                })
    }
}

下面是writeProduct操作。

function writeProduct(id) {
    return {
        type: 'WRITE_PRODUCT',
        id
    }
}

下面是WRITE_PRODUCT的缩减程序

case 'WRITE_PRODUCT':
    console.log("WRITE PRODUCT ACTION: ", action);
    console.log("state: ",state);
    return {
        productID: action.id
    };

这是我在尝试分派这两个操作时遇到的错误。

​

​

因为'cannot read property 'data' of undefined‘和当我注释掉writeProduct操作时一切正常，我相信这个问题可能与调度操作(A)同步有关？我被困在这里快一天了。我希望有人能帮助我..

Answer 1

有两件事。在控制台中，您可以看到console.log("GET OPERATORS: ",data);打印未定义。这意味着你的api请求失败了。

dispatch(authActions.getOperators(url, requestOptions))
        .then((data) => {
            console.log("GET OPERATORS: ",data);
            this.setState({operators: data.data, selectedProduct:  data.data[0].productName,visible: false},()=>console.log("States After fetch: ",this.state));
        },
          (error)=>{
            console.log(error);
            })

这里data是未定义的，data.data正在触发找不到未定义错误的数据。那么promise chain中就没有catch块了。

也许它应该是

dispatch(authActions.getOperators(url, requestOptions))
    .then((data) => {
        console.log("GET OPERATORS: ",data);
        this.setState({operators: data.data, selectedProduct:  data.data[0].productName,visible: false},()=>console.log("States After fetch: ",this.state));
    }).catch((error)=>{
        console.log(error);
    })

你可以从同一个方法中以同步或异步的方式发送任何动作，这都无关紧要。