时间戳

首页 > 解决方案 > 重复相同的输入不显示

reactjs - 重复相同的输入不显示

问题描述

我正在使用 Laravel 和 React 制作应用程序。我在 laravel 中创建了一个事件来实时显示数据，我正在使用“ React Transition Group ”为添加的数据添加动画。

问题是，当我在没有这个包的情况下正常添加数据时，数据显示正确，但是一旦添加，动画和数据工作正常，除非重复相同的数据。

例如，如果我添加{patient.nom}和{patient.prenom}值，例如John& Doe。它们会出现，但如果我再放一遍，它们就不会出现，但在数据库中它们已完美注册。

经过一些测试，我很确定它与keyin

<CSSTransition 
          key={patient.nom,patient.prenom}
            timeout={500}
            classNames="item"><CSSTransition>

整个组件：

import React,{Component} from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';
import Echo from "laravel-echo";
import {
  ListGroup,
  Button,
} from 'react-bootstrap';
import {
  CSSTransition,
  TransitionGroup,
} from 'react-transition-group';

import './styles.css';
 
class Patient extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            patients : [],
        };
    }

        componentDidMount() {
            axios.get('api/patients')
            .then(response => {this.setState({patients: response.data})})
            .catch(err => console.log(err));
            
            window.Echo.channel('home')
                .listen('NewPatient', newPatientData => {
                    this.setState({
                        patients: this.state.patients.concat(newPatientData)
                    })
                }, e => {
                    console.log("Error", e)
                })
        }

        render() {
          return (
            <div>
              <TransitionGroup>


{this.state.patients.slice(0).reverse().map(patient => 

              <CSSTransition 
              key={patient.nom,patient.prenom}
                timeout={500}
                classNames="item">
                  <ListGroup.Item>                 
                {patient.nom} {patient.prenom}
                </ListGroup.Item>  
              </CSSTransition>
  )} 

              </TransitionGroup>
            </div>
          )
        }
      }

export default Patient;

标签： reactjslaravel

解决方案

解决了。正如我在一篇文章中读到的：

为每个项目生成一个唯一的 id，并在呈现列表时将其用作键。

所以我的列表中没有唯一的 id，因为正在广播的事件没有发送 id。

因此，在我应该拥有的键的最终结果中 key={patient.id} ，就像列表中的每个元素都将具有来自数据库的唯一 ID。

推荐阅读