내가이 비슷합니다 다른 질문에서 보았다하지만 내 문제를 해결할 수없는 것

Question

동일한 키 ReactJS와 두 아이가 발생했습니다 : CardContainer.js 및 SingleCardContainer.js

CardContainer.js : 나는 두 가지 구성 요소가

import React, { Component } from 'react'; 
import Modal from 'boron/WaveModal'; 

//Default firebase App 
import { firebaseApp } from '../firebase/Firebase'; 
import SingleCardContainer from '../cards/SingleCardContainer'; 

var dataRef = firebaseApp.database(); 
var dataArray = []; var userInfo = {}; 
var userArray = []; 
var done = false; 

class CardContainer extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      usedArray: [] 
     } 

     this.showModal = this.showModal.bind(this); 
     this.hideModal = this.hideModal.bind(this); 
    } 

    showModal() { 
     this.refs.modal.show(); 
    } 
    hideModal() { 
     this.refs.modal.hide(); 
    } 

    componentWillMount() { 
     //Get the data 
     var referThis = this; 
     var videosRef = dataRef.ref('posts/'); 
     videosRef.on('value', function (snapshot) { 
      snapshot.forEach(function (data) { 
       //Store each value into an name-based object. 
       userInfo.userid = data.val().userid; 
       userInfo.likes = data.val().likes; 
       userInfo.dislikes = data.val().dislikes; 
       userInfo.challenges = data.val().challenges; 
       userInfo.profilePic = data.val().profilePic; 
       userInfo.videoCategory = data.val().videoCategory; 
       userInfo.videoDesc = data.val().videoDesc; 
       userInfo.videoTitle = data.val().videoTitle; 
       userInfo.videoURL = data.val().videoURL; 
       userInfo.uniqueKey = data.key; 
       //Then push the object into an array. 
       userArray.push(userInfo); 
       //reset the userInfo object 
       userInfo = {}; 
      }) 
      referThis.setState({ 
       usedArray: userArray 
      }) 
     }); 
    } 


    render() { 
     function initApp() { 
     } 
     window.addEventListener('load', function() { 
      initApp() 
     }); 

     var usedArray = this.state.usedArray; 

     return (
      <div id="bodyType"> 
       {usedArray.map(data => <SingleCardContainer {...data} key={data.uniqueKey} />) 
       } 
      </div> 
     ); 
    } 
} 
export default CardContainer; 

그리고 여기가 SingleCardContainer.js을이다 : 나는 LIKE 버튼을 클릭 때마다,이 팝업 :

import React, { Component } from 'react'; 
import { 
    Player, ControlBar, 
    ForwardControl, CurrentTimeDisplay, 
    TimeDivider, VolumeMenuButton, BigPlayButton 
} from 'video-react'; 
import ModalContainer from '../cards/ModalContainer'; 

import { firebaseApp } from '../firebase/Firebase'; 
var databaseRef = firebaseApp.database(); 

class SingleCardContainer extends Component { 
    constructor(props) { 
     super(props); 
     this.state = ({ 
      activeUser: false, 
      activeUserID: "", 
      like: false, 
      dislike: false, 
      challenge: false 
     }); 
     this.likeButton = this.likeButton.bind(this); 
     this.componentWillMount = this.componentWillMount.bind(this); 
     this.statCheck = this.statCheck.bind(this); 
    } 

    /** 
    * Use the unique key of each post to distinguish from one another. 
    * 
    */ 
    likeButton(uniqueKey) { 
     var likeNumber, referThis = this, newLikeNumber; 
     if (this.state.activeUser) { 
      databaseRef.ref('posts/' + uniqueKey).on('value', function (snapshot) { 
       likeNumber = snapshot.val().likes; 
      }); 
      databaseRef.ref('statkeeper/' + this.state.activeUserID + '/' + uniqueKey).on('value', function (snapshot) { 
       console.log("StatKeeper: " + snapshot.val().like + "\n" + snapshot.val().dislike + "\n" + snapshot.val().challenge); 
       if (!(snapshot.val().like)) { 
        //increment the number by 1. 
        newLikeNumber = likeNumber + 1; 
       } else { 
        newLikeNumber = likeNumber - 1; 
       } 
      }); 
      setInterval(function() { 
       var updates = {}; 
       updates['posts/' + uniqueKey + '/likes'] = newLikeNumber; 
       //Update it in the database 
       databaseRef.ref().update(updates); 
      }, 2000); 

     } else { 
      //They have not logged in so tell them to log in. 
      window.alert('Please log in to like!'); 
     } 
    } 
    //Check if the user is logged in and then setState if he/she is. If not, they won't be able to like/dislike/challenge. 
    componentWillMount() { 
     //assign state to referThis 
     var referThis = this; 
     firebaseApp.auth().onAuthStateChanged(function (user) { 
      if (user) { 
       referThis.setState({ 
        activeUser: true, 
        activeUserID: user.uid 
       }) 
      } else { 
       referThis.setState({ 
        activeUser: false 
       }) 
      } 
     }); 
    } 
    /** 
    * Check if the user has already liked/disliked/challenged the post's user. 
    */ 

    render() { 
     const { userid, likes, dislikes, challenges, profilePic, videoCategory, videoDesc, videoTitle, videoURL, uniqueKey } = this.props; 
     return (
      <div className="container"> 
       <div className="card" id="generalCard"> 
        <div className="card-text"> 
         <div id="singleVideoContainer"> 
          <h3>{videoTitle}</h3> 
          <p> {userid}</p><p>{uniqueKey}</p> 
          <Player poster="" src={videoURL}></Player> 
          <div id="videoInfoSection"> 
           <div className="row" id="buttonContainerRow"> 
            <div className="col-md-4 col-xs-6 col-sm-4"> 
             <a className="supportButtons" onClick={() => this.likeButton(this.props.uniqueKey)} role="button"><i className="fa fa-thumbs-up"></i></a> 
             <p id="likeNumber" >{likes}</p> 
            </div> 
            <div className="col-md-4 col-xs-6 col-sm-4"> 
             <a className="supportButtons" onClick={() => this.challengeButton()} role="button"><i className="fa fa-shield"></i></a> 
             <p id="challengeNumber">{challenges}</p> 
            </div> 
            <div className="col-md-4 col-xs-6 col-sm-4"> 
             <a className="supportButtons" onClick={() => this.dislikeButton()} role="button"><i className="fa fa-thumbs-down"></i></a> 
             <p id="dislikeNumber">{dislikes}</p> 
            </div> 
           </div> 
           <div id="commentSection"> 
            <p>{videoCategory}</p> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     ); 
    } 
} 

export default SingleCardContainer; 

문제가 있다는 것입니다

flattenChildren (...) : 동일한 키를 가진 두 명의 자녀가 발생했습니다. 하위 키는 고유해야합니다. 두 자녀가 키를 공유하면 첫 번째 자녀 만 사용됩니다. 는 CardContainer.js

에 나는 다른 포스트에서 본 키 = {this.uniquekey +에서 UniqueID를} 만드는 시도했지만 그게 해결되지 않습니다.

Answer 1

이것은 반드시 권장되는 것은 아니지만 문제를 빨리 해결할 수 있습니다.

지도를 수정하여 색인에 추가하고 ID에 추가하십시오.

{ usedArray.map((data, i) => <SingleCardContainer {...data} key={data.uniqueKey+i} />) } 

장기, 당신은 시도하고 uniqueKey 그렇게 고유하지 않은 이유를 찾아야한다.