时间戳

首页 > 解决方案 > 无法从api获取数据

reactjs - 无法从api获取数据

问题描述

我试图对 yandex 地图进行请求地理编码。ymaps.geocode(cityname) 返回一个承诺。

我用这样的东西

动作>index.js

    export function addWay(text) {
return async dispatch => {
    try { 
        const request = await window.ymaps.geocode(text)
        debugger
        dispatch({
            type: 'ADD_WAY',
            payload: request
        })
    } 
    catch (e) {}
}

}

MarkAdd.js

import React, { Component}  from 'react';
import {addWay} from '../actions/index';
import { connect } from 'react-redux';

class MarkerAdd extends Component {
    constructor(props) {
        super(props);
        this.state = {value:''}

    }
    onInputChange = e => {
        this.setState({ value: e.target.value})
    }
    keyPress = e => {
        if(e.keyCode === 13){
            console.log('enter', e.target.value);
            this.props.addWay(this.state.value);
            this.setState({ value: ''})
        }
    }
    render() {
        return(
            <div className="field">
                <div className="control">
                     <input className="input is-medium" 
                            type="text" 
                            placeholder="Add mark"
                            onKeyDown={this.keyPress}
                            onChange={this.onInputChange}
                            value={this.state.value}
                            >
                     </input>
                 </div>
            </div>
        )
}
}
export default connect(null, {addWay})(MarkerAdd);

但是错误说：动作必须是普通对象。使用自定义中间件进行异步操作。（Redux Thunk 已安装并连接）

怎么了？如果我通过控制台启动它，它实际上会返回承诺。

标签： reactjsreduxredux-thunk

解决方案

如果您已经redux-thunk安装，那么您可以通过这种方式从组件调度操作：

import {addWay} from '../actions/index';
...
keyPress = e => {
    if(e.keyCode === 13){
        this.props.dispatch(addWay(this.state.value)); // <-- dispatch action
        this.setState({ value: ''})
    }
}

动作 itslef 必须返回一个接受的函数dispatch：

export function addWay(text) {
    return async dispatch => {
        try { 
            const request = await window.ymaps.geocode(text)
            dispatch({
                type: 'ADD_WAY',
                payload: request
            })
        } 
        catch (e) {}
    }
}

推荐阅读