Question

我正在尝试学习redux，因此我创建了一个小型网站，该网站使用第三方API搜索电影并将其添加到我自己的数据库中，然后在其中我使用redux并对其进行显示。关键是要跟踪人们给我的电影建议，当我观看它们时，会将它们从列表中删除。

我以前是纯粹出于反应而做的，但我正在重新创建它以学习redux。

问题是，在我的仅反应版本中，我在单击按钮时将其删除即可使用，并且效果很好：

deleteThisMovie = () => {
  this.props.closeModal();

  this.props.toastAlert(`${this.props.title} successfully removed.`, 'success');

  api.deleteMovie(this.props.id)
  .then(this.props.updateMovies);
}

这是API代码：

deleteMovie = (movieId) => (
  superagent
  .delete(`${API_HOST}/movies/${movieId}`)
  .catch(err => console.error(err))
)

这可以删除。

======================

在我的react / redux版本中，这是我的操作：

function removeMovieFromDB(movieID) {
  const request = superagent.delete(`${API_HOST}/movies/${movieID}`);
  return request;
}

export function removeMovieAndRefresh(movieID) {
  return dispatch => (
    removeMovieFromDB(movieID).then((res) => {
        dispatch(fetchMovies());
        return res;
    })
);

}

在我的组件中这样称呼：

<button type="button" onClick={() => this.removeMovie(apiID)}>
Remove
</button>

那个功能是这样的：

removeMovie = (movieID) => {
    this.props.removeMovieAndRefresh(movieID);
    this.closeModal();
}

在此版本中，当我单击按钮时，出现此错误：

无法加载{host_goes_here} / movies / 12219：请求的资源上没有“ Access-Control-Allow-Origin”标头。因此，不允许访问来源“ http://localhost:8080”。响应的HTTP状态代码为503。

我相关的服务器代码是这样的：

const cors = require('cors');
app.use(cors());

和mongoDB控制器删除代码：

moviesController.delete('/:id', (req, res) => {
  Movie.findByIdAndRemove(req.params.id, function(err) {
    if (err) throw err;
    console.log('Movie removed successfully.');
  })
  .then(() => res.status(204).end());
});

知道我的redux delete怎么回事吗？我想念什么吗？我也尝试过使用axios，但这没用。我还尝试了使用方法“ DELETE”的基本提取。那也不起作用。但是，当我在同一台服务器上使用仅反应版本时，它会毫无问题地删除。

服务器上启用了核心功能，POST正常运行，DELETE不起作用

0 个答案: