在反应中从云中获取数据

Question

我是 nodejs 新手。我想为我存储在 cloudant.So 中的数据创建可视化，我已经从 nodejs 中的 cloudant 获取数据，但我没有找到任何方法来发送数据以对可视化做出反应。我已经在 nodejs 控制台中获取了 cloudant 数据，现在我不明白如何发送这些数据来做出反应

Answer 1

根据描述，假设您已经构建了一个 REST api，为了让 React 接收该数据并将数据映射到视图，您需要为前端设置 React 项目.

在您的应用程序组件中，通常，进行网络调用的更好方法是使用 ComponentDidMount 生命周期钩子。

您可以使用您喜欢的库来调用 ex axios 或 fecth。

假设您正在获取有关帖子的数据、观看次数、喜欢的次数和不喜欢的次数等。将它们初始化为空对象。

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

一旦您的状态更新，React 将重新渲染 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>
);

}

这是一个小例子，实际应用取决于手头的数据和你打算用它做什么。我希望它给了你一个简短的想法。

在反应中从云中获取数据

Fetch data from cloudant in react

node.js

express

cloudant

reactjs