Question

我有以下代码：

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {getAgeOptions, getGenderOptions} from '../actions/options-actions';
import ItemTextEdit from '../components/ItemTextEdit';
import DropSelect from '../containers/DropSelect';

export class BookDetail extends Component{
    render(){
        if(!this.props.book){
            return <div>Select a book to get started.</div>;
        }

console.log(this.props.getGenderOptions());
        return(
           <div>
...other code was here to display
            </div>
        )
    }
}

function mapDispatchToProps(dispatch){
    return bindActionCreators({getAgeOptions:getAgeOptions, getGenderOptions:getGenderOptions}, dispatch);

}

function mapStateToProps(state){
    return{
        book: state.activeBook
    };
}
export default connect(mapStateToProps, mapDispatchToProps)(BookDetail);

当我使用“console.log（this.props.getGenderOptions）;”运行此代码时它控制台注销了一个f（）{}但是当我尝试在上面调用它时它会给我以下错误：

TypeError：this.props.getGenderOptions不是函数这是动作创建者：

import axios from 'axios';

const ROOT_URL = `http://localhost:8080/`;
const ROOT_OPTIONS_URL = `${ROOT_URL}options`;

export const GET_GENDER_OPTIONS = 'GET_GENDER_OPTIONS';
export const GET_AGE_OPTIONS = 'GET_AGE_OPTIONS';

export function getGenderOptions() {
    const url = `${ROOT_OPTIONS_URL}/gender`;
    const request = axios.get(url);
    return {
        type: GET_GENDER_OPTIONS,
        payload: request

    }
}

export function getAgeOptions() {
    const url = `${ROOT_OPTIONS_URL}/age`;
    const request = axios.get(url);
    return {
        type: GET_AGE_OPTIONS,
        payload: request

    }
}

我不知道为什么我没有恢复我的功能。

Answer 1

在执行axios请求时，您应该等待它，axios.get()会返回一个承诺，所以在您的情况下，您必须（对于其他函数也是如此）：

export async function getAgeOptions() {
  const url = `${ROOT_OPTIONS_URL}/age`;
  const request = await axios.get(url);
  return {
    type: GET_AGE_OPTIONS,
    payload: request
  }
}

这将resolve或reject您的承诺，为您提供所需的输出。您可以在https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Global_Objects/Promise

上找到有关此主题的更多信息

同样使用connect()中的react-redux极大地提高了代码的可读性，它是一个高级组件，它将使用mapStateToProps和mapDispatchToProps包裹您的组件。

Answer 2

您最有可能直接使用导出的BookDetail，而不是连接的，这是默认导出。因此，删除export类声明中的BookDetail关键字会更安全，因此当您不小心直接按名称导入时，会出现错误。

在导入网站上，将import { BookDetail } from ...替换为

import BookDetail from ...

mapDispatchToProps没有让我的ActionCreator成为一个功能

2 个答案: