Извлекать данные из облака в ответ - PullRequest
Новая
       32

Извлекать данные из облака в ответ

0 голосов
/ 18 марта 2020

Я новичок в nodejs. Я хочу создать визуализацию для данных, которые я хранил в cloudant. Итак, я получил данные из cloudant в nodejs, и я не нахожу способа отправить данные для реагирования на визуализацию. Я получил данные облачного хранилища в консоли nodejs, теперь я не понимаю, как отправить эти данные для реакции

1 Ответ

0 голосов
/ 19 марта 2020

Исходя из описания, предполагая, что вы создали API REST, чтобы реагировать на получение этих данных и отображать данные в представления, необходимо настроить проект React для внешнего интерфейса.

Как правило, в компоненте вашего приложения лучший способ выполнить сетевой вызов - использовать ComponentDidMount ловушку жизненного цикла.

Вы можете использовать предпочитаемую библиотеку для сетевых вызовов ex ax ios или fecth.

Допустим, вы выбираете данные о сообщениях, количестве просмотров, количестве лайков и количестве дислайков и т. д. c. инициализируйте их пустыми объектами. 

state = { 
postLikes: 0,
postDislikes: 0,
comments: [],
postViews: 0 
}

Теперь вызовите компонент, монтировавший хук жизненного цикла для извлечения данных 

async ComponentDidMount() {
 const data = await axios.get('http://yourApiEndpoint.com/resources');
 // you could also use fetch api .then() approach...

// Now you need to update the state using setState method
 this.setState({postLikes: data.postLikes, postViews: data.postViews ... });
}

Как только ваше состояние будет обновлено, реагировать будет повторно визуализировать части DOM, которые требуют рендеринга ... Фактическое приложение будет зависеть от библиотеки визуализации, которую вы используете ... Но если бы мы отображали вышеуказанные данные в виде текста, это делается следующим образом 

render(){
 return(
     <Fragment>
        <p>No. of likes: {this.state.postLikes} </p>
        <p>No. of dislikes: {this.state.postDislikes} </p>
          {/* and so on... render the stuff you need to render here */}
     </Fragment>
);

}

Это небольшой пример. Фактическое приложение зависит от имеющихся данных и того, что вы планируете делать с ними. Я надеюсь, что это дало вам краткое представление.

...