Question

我正在建立一个简单的论坛，试图一步一步。第一步是尝试将我从数据库中获取的数据放到我的页面上。但是，从长远来看，当我进入生产时，我问自己，当我从数据库中获取所有记录并将其设置为状态然后在我的页面视图中显示时，这是正确的方法吗？

原因我担心这是因为从长远来看，如果我有2万个论坛帖子，那么所有20k的记录都会存储在我从我的数据库中获取的数组中的状态中？

我已经阅读过有关使用redux的文章，但我不想使用这种方法，因为我仍然在学习反应的过程中，我只是想知道他们是否有更好的方法来做到这一点？

另外，我的假设是我采取了正确的方法，但我只能说一次加载10-20，直到用户要求查看更多？

这是我的代码：

型号：（这个查询显然会被更改我只是想把数据推到我的页面上以确保它有效。）

我想这更像是寻求建议问题而不是获取我的代码的帮助我不知道还能在哪里问。

var db = require('../dbconnection');

var forumPage = {
    postTopic: function (data, callback) {
        var datetime = new Date();
        var createdDate = datetime.getFullYear()+ '-' + (datetime.getMonth()+1) + '-' + datetime.getDate()

        db.query("insert into forum_topics set topic_name=?, topic_message=?, created_date=?", [data.questionTitle, data.questionBody, createdDate], callback);
    },
    selectTopics: function(data, callback) {
        db.query("SELECT * from forum_topics order by created_date desc", callback);
    }
}

module.exports = forumPage;

查看：

import React from 'react';

import { Link } from 'react-router-dom';
import { Modal, Button } from 'react-bootstrap';

import Header from '../common/Header';
import ForumpageService from '../../services/forumService';
import Forumposttopic from './ForumpostTopic';

class Forumpage extends React.Component {
    constructor(props){
        super(props);

        this.handleClose = this.handleClose.bind(this);
        this.handleShow = this.handleShow.bind(this);

        this.state = {
            show: false,
            searchQuery: '',
            questionHead: [],
            questionBody: [],
            questioncreatedDate: [],
            questionmodifiedDate: [],
        }
    }

    onChange(e){
        this.setState({
            [e.target.name]: e.target.value
        })
    }

    handleClose(){
        this.setState({
            show:false,
        });
    }

    handleShow(){
        this.setState({
            show:true
        });
    }

    onSubmit(e){
        e.preventDefault();

    }

    async componentDidMount(){
        const selecttopicsData = await ForumpageService.selectTopics();
        for(let i = 0; i < selecttopicsData.length; i++) {
            this.setState({
                questionHead: [...this.state.questionHead, selecttopicsData[i].topic_name],
                questionBody: [...this.state.questionBody, selecttopicsData[i].topic_message],
                questioncreatedDate: [...this.state.questioncreatedDate, selecttopicsData[i].created_date],
                questionmodifiedDate: [...this.state.questionmodifiedDate, selecttopicsData[i].modified_date],
            })

        }
        //console.log(selecttopicsData);
        console.log(this.state);

    }




    render(){
        return (
            <div className="container" id="forum-container">
                <Header />
                <form
                    method="POST"
                    onSubmit={e => this.onSubmit(e)}
                    autoComplete="off"
                >
                    <div className="row">
                        <div className="col-md-4" id="questionBox">
                            <button className="btn btn-default" id="searchButton">
                                <i className="fas fa-search"></i>
                            </button>
                            <input
                                type="text"
                                name="searchQuery"
                                className="form-control"
                                id="searchBox"
                                placeholder="Search..."
                                onChange={e => this.onChange(e)}
                                value={this.state.searchQuery}
                            />
                        </div>
                        <div className="col-md-8" id="askquestion">
                            <Button className="btn btn-default" onClick={this.handleShow}>Ask a Question</Button>
                        </div>
                        <Modal show={this.state.show} onHide={this.handleClose}>
                            <Modal.Header closeButton>
                                <Modal.Title>Question?</Modal.Title>
                            </Modal.Header>
                            <Modal.Body>
                                <Forumposttopic />
                            </Modal.Body>
                        </Modal>
                    </div>
                    <div className="row">
                        <table className="table table-striped">
                            <thead>
                                <tr>
                                    <th id="topic">Topic</th>
                                    <th id="replies">Replies</th>
                                    <th id="latest">Latest Post</th>
                                </tr>
                            </thead>
                            <tbody>
                            //// This is where I would map over fetched data. But I'm concerned in the future that this will cause a problem if I set all data that I fetched from my db into state all at once.
                                <tr>
                                    <td id="topic-message">
                                        <h2>Dummy Data first post</h2>
                                        <p id="responsetext">Proin vitae ornare tortor. In suscipit diam tortor, et pellentesque lectus tincidunt eget. Integer nisi leo, vestibulum vitae tincidunt a, suscipit eu massa. Cras ut enim tortor.</p>
                                    </td>
                                    <td id="replies-message">
                                        <p>4</p>
                                    </td>
                                    <td id="latest-message">
                                        <p>Random User</p>
                                        <p>Created Date: 05/03/18</p>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </form>
            </div>
        )
    }
}

export default Forumpage;

Answer 1

Redux不会帮助您减少在您所在州的储存量。如果你有一个论坛，你可能会在下面有不同的子论坛和主题。如果需要，每个线程都有多个页面，因此您不需要一次显示超过50个帖子。您只需在数据库中查询和拆分内容，然后只存储用户在状态中看到的部分。如果您只是选择所有内容然后将其置于状态，则数据库中没有任何意义。

我不确定您使用的是哪个版本的sql，因此语法可能有所不同，但我做了类似于有时会有数十万页的表的内容。我只是将页码存储在状态中，然后在我的sql中的限制语句中使用它。

例如，如果你改变你的选择陈述并按照例如发布日期的顺序进行排序，那么限制0,10然后10,10,10然后等10然后你将永远不需要在你的州存储超过10个帖子他们将始终以论坛帖子的每个页面上的相同顺序返回。

this.state = {
  thread: 'my cool topic',
  limit: 20,
  index: 0,
  pages: 0
}

当您执行第一次查询时，您可以计算一下您应该在列表中呈现的页数。然后，您只需根据您的限制和索引进行查询，并根据用户操作将其增加到您的状态。

关键是从您的州建立您的查询。您当前使用查询建立状态的方法。

在州内存储大量数据？

1 个答案: