Question

我正在使用提取API从Rails控制器请求数据。请求到达控制器，我成功地从数据库中查找了一些数据。

def show
    set_recipe
    @recipe.to_json
end

但是，我的react组件中的fetch语句未设置状态对象。

class Hello extends React.Component {
constructor(props) {
    super(props);

    this.state = {
        data: null,
    };
}  

componentDidMount() {
    fetch('/recipes/1')
        .then(response => response.json())
        .then(data => this.setState({ data }));
  }

render() {
    return(<div>{this.state.data}</div>)
  }
}

有想法吗？

更新：使用邮递员，我意识到我的组件实际上并没有返回任何json。我更新了上面的控制器代码，使其看起来像您在下面看到的那样。此邮递员开始获取json响应后。但是，这不能解决我的组件状态仍然为空的事实。我在chrome控制台中进行了一些调试，并通过提取功能能够从服务器获取json。这将问题范围缩小到我在componentDidMount内部使用fetch的方式。

   def show
    set_recipe
    render(json: @recipe)
   end

更新2：已解决

使其正常工作。我下载了chrome的react开发人员扩展，可以看到this.state.data实际上已经设置好了。但是我得到一个错误，说反应无法渲染对象。所以我需要添加.name来从json对象中获取名称字符串。然后最后我得到了一个错误，因为this.state.data被初始化为null，并且我猜该组件在挂载之前第一次渲染还没有将其设置为json，并且.name不是可以被调用的方法从null。通过将其初始化为空字符串，它可以工作，但不确定为什么。以下是最终组件：

class Hello extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            recipe: ''
        };
    }

    componentDidMount() {
        fetch('/recipes/1')
            .then(response => response.json())
            .then(recipe => this.setState({ recipe }));
    }

    render() {
        return(<div>{this.state.recipe.name}</div>)
    }
}

Answer 1

这是它需要的外观。有关更多详细信息，请参见原始帖子。

控制器：

   def show
    set_recipe
    render(json: @recipe)
   end

组件：

class Hello extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            recipe: ''
        };
    }

    componentDidMount() {
        fetch('/recipes/1')
            .then(response => response.json())
            .then(recipe => this.setState({ recipe }));
    }

    render() {
        return(<div>{this.state.recipe.name}</div>)
    }
}

提取未从Rails Controller返回数据

1 个答案: