React Js Reverse 数组在点击时反向

Posted 2023-02-22

【中文标题】React Js Reverse 数组在点击时反向

【英文标题】：React Js Reversed array un reverses on clicks

【发布时间】：2018-01-17 08:59:49

【问题描述】：

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

代码如下：

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

为什么会这样，我该如何解决。

【参考方案1】：

不要在您的 render 方法中反转它。每次重新渲染时，您都会reverse它。所以发生的情况可能是当你打开模态窗口时它第二次被反转了。

在这里做一次

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

【讨论】：

是的，这可能是我的错。完美现在可以正常工作了，谢谢