我创建了一个 react-redux 应用程序。目前它所做的是从服务器(api)加载类(class)，并将它们显示到类(class)组件​​。这完美地工作。我正在尝试添加一个功能，您可以在其中通过将类(class)发布到服务器来创建类(class)，然后服务器将返回一个成功对象。但是，当我发布到服务器时，出现以下错误(见下文)。我认为这是由于我的 connect 语句在监听负载类(class)操作。很明显，它认为它应该得到一个列表，而不是一个成功对象。我已经尝试了一些方法来收听类(class)和成功响应，但是为了节省您阅读我所做的所有奇怪事情的时间，我无法让它发挥作用。有谁知道如何解决这个问题？

错误

TypeError: this.props.courses.map is not a function

    onSave(){
        // this.props.createCourse(this.state.course); 
        this.props.actions.createCourse(this.state.course); 
    }
    render() {
        return (
            <div>
                <div className="row">
                    <h2>Couses</h2>
                    {this.props.courses.map(this.courseRow)}
                    <input 
                        type="text"
                        onChange={this.onTitleChange}
                        value={this.state.course.title} />
                    <input 
                        type="submit"
                        onClick={this.onSave}
                        value="Save" />
                </div>
            </div>
        );
    }
}
// Error occurs here 
function mapStateToProps(state, ownProps) {
  return {
    courses: state.courses
  };
}
function mapDispatchToProps(dispatch) {
    return {
        actions: bindActionCreators(courseActions, dispatch)
    };
}
export default connect(mapStateToProps, mapDispatchToProps)(Course);

export function loadCourse(response) {
    return {
        type: REQUEST_POSTS,
        response
    };
}
export function fetchCourses() {
    return dispatch => {
        return fetch('http://localhost:3000/api/test')
            .then(data => data.json())
            .then(data => {
                dispatch(loadCourse(data));
            }).catch(error => {
                throw (error);
            });
    };
}
export function createCourse(response) {
    return dispatch => {
        return fetch('http://localhost:3000/api/json', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                response: response
            })
        })
        .then(data => data.json())
        .then(data => {
            dispatch(loadCourse(data));
        }).catch(error => {
            throw (error);
        });
    };
}

export default function courseReducer(state = [], action) {
    switch (action.type) {
        case 'REQUEST_POSTS':
            return action.response;
        default:
            return state;
    }
}

router.get('/test', function(req, res, next) {
  res.json(courses);
});

router.post('/json', function(req, res, next) {
  console.log(req.body);
  res.json({response: 200});
});

function mapStateToProps(state, ownProps) {
  return {
    courses: state.courses, 
    resposne: state.resposne
  };
}

最佳答案

假设:

Actions are payloads of information that send data from your application to your store. They are the only source of information for the store.

//.....
.then(data => {
  dispatch(loadCourse(response));  // the same payload you called createCourse with
})
//.....

{
  type: REQUEST_POSTS,
  response: {
    title: 'Thing you entered in Text Field',
  }
}

Actions describe the fact that something happened, but don't specify how the application's state changes in response. This is the job of reducers.

{ courses: [{...}, {...}, {...}] }

{ title: 'Thing you entered in Text Field'}

{ courses: { title: 'Thing you entered in Text Field'} }

export default function courseReducer(state = [], action) {
  switch (action.type) {
    case 'REQUEST_POSTS': 
      return [...state, action.response]
    default:
      return state
  }
}

关于javascript - React - TypeError : this. props.courses.map 不是函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44418362/