javascript - React Js 单击时反向反转数组

Question

因此，我有一个从数据库中提取的数组，并且我已将其反转，以便当您单击页面上的按钮(打开一个小模式样式窗口)时，最新的数据库条目会转到顶部，显示的数组会翻转并进入由于某种原因从最旧到最新，我不知道为什么。

这是代码:

import React, { Component } from 'react';
import axios from 'axios';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import RaisedButton from 'material-ui/RaisedButton';
import { Modal, ModalHeader, ModalTitle, ModalClose, ModalFooter, ModalBody } from 'react-modal-bootstrap';
import TextField from 'material-ui/TextField';

class ViewNoteDetails extends Component {
    constructor(props) {
        super(props);

        this.NewNote = this.NewNote.bind(this);
        this.handleChange = this.handleChange.bind(this);
    }

    state = {
        Case: this.props.Case,
        notesToShow: this.props.Case.slice(0, parseInt(this.props.AmountToShow, 10)),
        isOpen: false,
        note: '',
    }

    NewNote() {
        const self = this;
        if (this.state.note !== '') {
            axios.post('http://******'
                + window.location.href.split('view/')[1]
                + '/' + self.state.note
            ).then(function (res) {
                if (res.data === "Updated") {
                    self.hideModal();
                    window.location.reload();
                }
            })
            .catch(function (error) {
                console.log(error);
            });
        } else {
            window.alert("Cannot Enter A Blank Note")
        }
    }

    handleChange(e) {
        this.setState({
            [e.target.name]: e.target.value
        });
    }

    openModal = () => {
        this.setState({
            isOpen: true
        });
    };
    hideModal = () => {
        this.setState({
            isOpen: false
        });
    };

    render() {

        const pullRight = {
            float: "right",
            display: "inline",
        }
        const inline = {
            display: "inline",
        }
        const Overflow = {
            overflow: "auto",
            width: "100%",
            height: "50vw",
        }

        return (
            <MuiThemeProvider>
                <div>
                    <Modal isOpen={this.state.isOpen} onRequestHide={this.hideModal}>
                        <ModalHeader>
                            <ModalClose onClick={this.hideModal} />
                            <ModalTitle>Enter Your Note</ModalTitle>
                        </ModalHeader>
                        <ModalBody>
                            <TextField hintText="Enter Note" name="note" fullWidth={true} onChange={this.handleChange} />
                        </ModalBody>
                        <ModalFooter>
                            <RaisedButton label="Save Note" secondary={true} onClick={() => this.NewNote()} />&nbsp;
                            <RaisedButton label="Cancel Note" secondary={true} onClick={() => this.hideModal()} />
                        </ModalFooter>
                    </Modal>
                    <br />
                    <h1 id="TOP" style={inline}>Note Details</h1>
                    <RaisedButton label="New Note" style={pullRight} secondary={true} onClick={() => this.openModal()} />
                    <br />
                    <br />
                    <div style={Overflow}>
                        {this.state.notesToShow.reverse().map(function (note, index) {
                            return (
                                <div key={note.NotePK}>
                                    <p className="well well-lg">
                                        {note.CreationDate.split('T')[0]} @ {note.CreationDate.split('T')[1].split('.')[0]} : {note.Note}
                                    </p>
                                </div>
                            );
                        })}
                    </div>
                    <br />
                </div>
            </MuiThemeProvider>
        );
    }
}

***** 正在替换数据库位置

当您单击“新注释”按钮时，呈现的注释的顺序会颠倒

所以如果是:

注1 笔记2 注3

点击新笔记时，它将更改为

注3 笔记2 注1

为什么会这样做以及如何解决这个问题。

Answer 1

不要在 render 方法中反转它。每次重新渲染时，您都会反转它。因此，当您打开模式窗口时，可能会发生第二次反转。

在这里做一次

 state = {
        Case: this.props.Case,
        notesToShow: this.props.Case.slice(0, parseInt(this.props.AmountToShow, 10)).reverse(),
        isOpen: false,
        note: '',
    }