React Js逆の配列をクリックすると逆さになります

Question

データベースから引き出された配列を持っていますので、少し新しいモーダルを開くページのボタンをクリックすると最新のdbエントリが先頭に移動します表示された配列が反転し、何らかの理由で最も古いものから最新のものへと変わり、なぜそれがわからないのですか？あなたは順序がレンダリングされたノート

に反転新しいノート]ボタンをクリックしたときに

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の方法では逆にしないでください。再描画されるたびにreverseになります。だから何が起こるかはおそらく、モーダルウィンドウを開くときにもう一度逆になっているということでしょう。

はおそらく私の悪い一度

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