Fetch не возвращает данные из Rails Controller - PullRequest
Новая
       6

Fetch не возвращает данные из Rails Controller

0 голосов
/ 19 октября 2018

Я использую api fetch для запроса данных с моего контроллера rails.Запрос поступил на контроллер, и я успешно просматривал некоторые данные из моей базы данных.

def show
    set_recipe
    @recipe.to_json
end

Однако оператор 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 и с помощью fetch смог получить json с сервера.Это сужает вопрос о том, как я использую fetch внутри componentDidMount. 

   def show
    set_recipe
    render(json: @recipe)
   end

ОБНОВЛЕНИЕ 2: РАЗРЕШЕНО

Получил работу.Я скачал расширение для активных разработчиков для Chrome и увидел, что this.state.data действительно был установлен.Но я получаю сообщение об ошибке, в котором говорится, что реакция не может сделать объект.Поэтому мне нужно было добавить .name, чтобы получить строку имени из объекта json.Затем, наконец, я получил ошибку, потому что this.state.data был инициализирован как ноль, и я предполагаю, что в первый раз, когда компонент рендерится перед монтированием, он еще не установил его в json, а .name не является методом, который может быть вызванот нуляИнициализировав его пустой строкой, он сработал, хотя и не знаю почему.Ниже приведен последний компонент: 

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>)
    }
}

1 Ответ

0 голосов
/ 20 октября 2018

Вот как это должно было выглядеть.См. Оригинальное сообщение для более подробной информации.

Контроллер: 

   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>)
    }
}
...