React Js反向数组un取消点击

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> 
     ); 
    } 
} 

*****是在更换新的数据库位置的

当您单击新的注释按钮上所呈现的音符顺序颠倒

所以如果是这样的话：

note 1 note 2 note 3

新笔记点击它会变成

注3 注2 注1

它为什么这样做，我如何解决这个问题。

Answer 1

不要在您的render方法中将其取消。每次它被重新渲染，你会reverse它。所以发生的情况可能是当你打开模态窗口时，它会再次颠倒过来。

这里就做一次

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