Question

我开始使用React / Redux对Web界面进行编码以管理我的服务器文件我现在有一个页面要求我的API将文件列表作为JSON。

效果很好，我的页面上有我服务器上所有文件的列表。但是选择文件操作失败，并显示以下错误：

TypeError：_this2.props.selectFile不是函数

这是我的代码：

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {createStore, applyMiddleware, combineReducers} from 'redux';
import {Provider, connect} from 'react-redux';
import thunk from 'redux-thunk';
import activeFileReducer from './reducers/reducer-active-file';
import dataListReducer from './reducers/reducer-data';

const reducer = combineReducers({
    datalist: dataListReducer, 
    activefile: activeFileReducer
})
const createStoreWithMiddleware = applyMiddleware(thunk)(createStore)
let store = createStoreWithMiddleware(reducer);
ReactDOM.render(<Provider store={store}>
    <App />
    </Provider>, document.getElementById('table'));

数据列表减速器

export default function datalist (state = [], action) {
    switch (action.type) {
        case "FETCH_REQUEST":
            return state;
        case "FETCH_SUCCESS": 
            return action.payload || [];
        default:
            return state;
    }
}

活性文件减速器

export default function activefile (state= {}, action){
        switch(action.type){
            case "FILE_SELECTED":
                return action.payload;
            default:
                return state;
        }

    }

动作/ index.js

export const selectFile = (file) => {
    return {
        type: "FILE_SELECTED",
        payload: file
    }
}


export const fetchDataRequest = () =>{
    return {
      type: "FETCH_REQUEST"
    }
}

export const fetchDataSuccess = (payload) => {
    return {
        type: "FETCH_SUCCESS",
        payload
    }
}

export const fetchDataError = () => {
    return {
        type: "FETCH_ERROR"
    }
}

数据一览容器

import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {fetchDataRequest, fetchDataSuccess, fetchDataError, selectFile} from '../actions/index';

class DataList extends Component{
    componentDidMount(){
        this.props.fetchDataWithRedux()

    }

    render(){
        return(
            <ul>
                {
                    this.props.datalist && 
                    this.props.datalist.map((item, key) =>{
                        return(
                            <li key={key} onClick={() => this.props.selectFile(item)}>{item.title}</li>
                        )
                    })
                }
            </ul>
        )       
    }
}


function fetchDataWithRedux() {
    return (dispatch) => {
        dispatch(fetchDataRequest());
        return fetchData().then(([response, json]) =>{
            console.log(response);
            if(response.status === 200){
            dispatch(fetchDataSuccess(json))
            dispatch(selectFile())
    }
    else{
        dispatch(fetchDataError())
        dispatch(selectFile())
    }
    })
}
}

function fetchData() {
const URL = "http://localhost:5000/api/deposit/view";
return fetch(URL, { method: 'GET'})
    .then( response => Promise.all([response, response.json()]));
}

function mapStateToProps(state){
    return {
        datalist: state.datalist
    }
}

export default connect(mapStateToProps, {fetchDataWithRedux})(DataList);

Answer 1

因为您没有将selectFile函数传递给道具中的组件，所以：

export default connect(mapStateToProps, {fetchDataWithRedux})(DataList);

传递selectFile的方式与传递fetchDataWithRedux的方式相同，请使用此方法：

export default connect(mapStateToProps, {fetchDataWithRedux, selectFile})(DataList);

Answer 2

您可以直接使用selectFile，而不是在将它们导入组件时将其绑定到道具。

<li key={key} onClick={() => selectFile(item)}>{item.title}</li>

删除this.props。以selectFile为前缀

React-Redux：如何分派异步操作和同步操作？

2 个答案: