尝试从 React 前端获取 Rails API 端点时出现 NoMethodError

Question

这真的让我摸不着头脑。我正在尝试做的事情应该很简单，但由于某种原因我无法让它发挥作用。

正如标题所说，我正在尝试从我设置为在 React 组件中显示的 Rails API 端点获取一些信息。

我的抓取看起来像这样：

  componentDidMount() {
    fetch(`/api/v1/coffee_formulas`)
    .then(response => response.json())
    .then(body => {
      this.setState({ formulas: body })
    })
  }

API 端点如下所示：

  def index
    formulas = current_user.coffee_formulas
    render json: { status: 'SUCCESS', message: 'Loaded coffee formulas', coffee_formulas: formulas }, status: :ok
  end

让我感到困惑的是，我可以导航到 http://localhost:3000/api/v1/coffee_formulas 并查看我想要在 React 端获取的确切 JSON。我的假设是我可以提取到同一点，但我想我错过了一些东西。

注意事项

• 我能够成功发布到同一个 API。
• 我正在使用 Google OmniAuth 生成会话和 current_user。
• 我尝试了几种不同的方式设置formulas 的状态，结果相同。 （例如：formulas: body.formulas、formulas: body.coffee_formulas 等）
• 我在终端中看到的确切错误是：

NoMethodError (undefined method 'coffee_formulas' for nil:NilClass):

• 我的控制台中的错误是500 (Internal Server Error)

就像我说的那样，我认为这是一件非常简单的事情，但我想我在这里遗漏了一个非常关键的细节。任何建议将不胜感激！

Answer 1

所以它最终成为 fetch 自身的问题。控制器实际上正在执行我想要的操作，但是需要将 fetch 格式化为：

  componentDidMount() {
  fetch(`/api/v1/coffee_formulas.json`, {
    credentials: 'same-origin',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    method: 'GET'
  }).then(response => response.json())
    .then(body => {
      this.setState({
        formulas: body.coffee_formulas,
        user: body.current_user
      })
    })
  } 

Answer 2

NoMethodError (undefined method 'coffee_formulas' for nil:NilClass) 表示您正在尝试在 nil 类上调用 coffe_formulas 方法。您的 current_user 助手返回 nil，因此您尚未授权您的请求。