将数据从 DB 传递到 React 组件答案

【问题标题】：Pass data from DB to React component将数据从 DB 传递到 React 组件
【发布时间】：2018-01-06 00:11:27
【问题描述】：

我正在尝试为我们的 cmets 应用编写 UI，

（项目回购https://github.com/Lv-246Python/myTrip）

我只是不知道应该如何构建我的 React 组件，以及从 DB 获取真正的 cmets 以进行渲染的流程是什么。我知道我必须使用'axios'，但我如何编码“这个字段将被'axios'给你的东西填充”？

下面是我的代码，如果您需要更多我当前的分支是 (33-comment-react-component)，谢谢。

comment.js

import React from 'react';

import Paper from 'material-ui/Paper';
import Divider from 'material-ui/Divider';
import List from 'material-ui/List/List';

import {CommentItem} from './comment_item';
import {CommentForm} from './comment_form';

const styles = {
  paper: {
      paddingLeft: 15,
      paddingRight: 15,
      paddingBottom: 15,

      marginLeft: 15,
      marginRight: 15,
      marginBottom: 15
  },

  divider: {
      backgroundColor: 'grey'
  }

};

export default class Comment extends React.Component {
    render() {
        return (
            <Paper zDepth={5} rounded={false} style={styles.paper}>
                <div>
                    <List>
                        <CommentItem/>
                        <CommentItem/>
                    </List>

                    <Divider style={styles.divider}/>
                    <CommentForm/>
                </div>
            </Paper>
        );
    }
}

comment_item.js

import React from 'react';

import {Card, CardActions, CardHeader, CardText} from 'material-ui/Card';
import Avatar from 'material-ui/Avatar';
import FlatButton from 'material-ui/FlatButton';
import ListItem from 'material-ui/List/ListItem';


const styles = {
  avatar: {
      marginRight: 10,
      marginBottom: 10
  },

  commentText: {
      fontSize: 20
  },

};

export class CommentItem extends React.Component {
    render() {
        return (
            <ListItem>
                <Card>
                    <CardHeader
                        title="Roman Hrytskiv"
                        subtitle="29/07/2017"
                        expandable={true} />

                    <CardText
                        actAsExpander={true}
                        style={styles.commentText}>
                        <UserAvatar />
                        Nice views man!
                        <br />
                        I wish I could go there with you but i have to code. See you in a month!
                    </CardText>

                    <CardActions
                        expandable={true}>
                      <FlatButton label="Edit" />
                      <FlatButton label="Delete" />
                    </CardActions>

                </Card>
            </ListItem>
        );
    }
}

class UserAvatar extends React.Component {
    render() {
        return (<Avatar src="static/src/img/avatar.jpg" size={40} style={styles.avatar}/>);
    }
}

【问题讨论】：

可能您必须创建 REST API 并使用 GET 请求接收数据。您可以使用 django rest 框架为 django 应用程序创建 REST API。

标签： django reactjs axios

【解决方案1】：

你需要再考虑一遍 react 的 documentation 并尝试理解 state and props 的概念。当应用程序加载时，您需要发出 API 请求以从您可能已创建的 REST API 中获取数据。然后在请求成功后，您需要使用该数据设置状态，然后使用该状态将数据查看到组件上。你必须阅读一下 react 的生命周期方法以及在什么时间点调用哪个函数。稍后，一旦您了解了 React 架构并了解了它的生命周期方法，您必须考虑了解 redux。

This 是我找到的学习 react 和 redux 的最好的在线课程。如有疑问，可以考虑查看。

【讨论】：

【解决方案2】：

考虑使用Flux 架构。你可以选择纯Flux（FacebookFlux utils）或者一些基于Flux的框架。我个人推荐Redux。

由于React 不是一个框架，它不会解释这些事情，但Redux（或类似的）会帮助你。

理解 Flux/Redux 流程需要一些时间，但值得。

【讨论】：