将数据从数据库传递到 React 组件

Question

我正在尝试为我们的评论应用编写 UI 代码，

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

我只是不知道我应该如何构建我的 React 组件，以及从 DB 获取真实评论以呈现的流程是什么。我知道我必须使用 'axios' 但我如何编码 "this is field is going to be filled with what 'axios' gives you"?

下面是我的代码，如果您需要更多，我当前的分支是 (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}/>);
    }
}

Answer 1

考虑使用 Flux 架构。您可以选择纯 Flux（Facebook Flux utils）或基于 Flux 的某些框架。我个人推荐Redux.

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

了解Flux/Redux流程需要一些时间，但这是值得的。

Answer 2

您需要考虑检查 documentation of react once again and try to get the concept of state and props。当应用程序加载时，您需要发出 API 请求以从您可能已创建的 REST API 中获取数据。然后在请求成功后，您需要使用该数据设置状态，然后使用该状态将数据查看到组件上。 React 的生命周期方法，什么时候调用哪个函数，你一定要读过一遍。稍后，一旦你了解了 React 架构并了解了它的生命周期方法，你就必须考虑学习 redux。

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

将数据从数据库传递到 React 组件

Pass data from DB to React component

django

reactjs

axios