Asked Nov 14th, 2019 12:41 PM 120 0 3
  • 120 0 3
+1

Hỏi về reactJS

Share
  • 120 0 3

Cho mình hỏi về việc load dữ liệu ra màn hình bị LOAD LẠI 2 LẦN khi thêm/xóa/sửa

Xem 2 hình bên dưới cho dễ hiểu và hình dung:

Dự kiến thì khi bấm Save, nó sẽ in ra thêm 1 dòng. Nhưng thực tế nó lại ra như hình bên dưới:

Nghĩa là nó load data mới chồng lên data cũ: _Data cũ: có 2 phần tử _Data mới: có 3 phần tử (sau khi thêm 1) (phải refresh lại trang web thì nó mới hiển thị đúng)

Mình học theo hướng dẫn trên video nên ko bit sửa thế nào nữa. Trong code mình có dùng UNSAFE_componentWillMount() cho việc in dữ liệu ra, ko bit có phải tại nó ko và sửa thế nào ạ? Có vẻ khó hiểu quá, cần thêm thông tin gì thì mình chụp gửi lên ạ. Mình dùng CSDL firebase.

Code của component NoteList (là danh sách phía trên, con của nó là NoteItem):

import React, { Component } from 'react';
import NoteItem from './NoteItem';
import {noteData} from './firebaseConnect';
import * as firebase from 'firebase';

class NoteList extends Component {
  constructor(props) {
    super(props);
    this.state={
      dataFirebase:[]
    }
  }
  
  UNSAFE_componentWillMount() {
    let layDuLieu = firebase.database().ref('dataForNote');
    let arrayData = []; //mảng này sẽ xài đến nó bên dưới
    layDuLieu.on('value', (notes) => {
      notes.forEach(element => {
        const key = element.key;
        const title = element.val().title;
        const content = element.val().content;
        arrayData.push({
          key:key,
          title:title,
          content:content
        }) 
      });
      
      this.setState({
        dataFirebase:arrayData
      })
      
    })
  }
  
  getData = () => {
    return this.state.dataFirebase.map((value, key) => {
      
      return(
        <NoteItem key={key}
        id={value.key}
        title={value.title}
        content={value.content}
        //Cha của NoteItem là NoteList nên mình dùng giá trị
        //bên Cha truyền cho bên Con, như vậy bên con sẽ
        //nhận được giá trị là this.props.note
        note={value}
        />
      )
    })
  }

  render() {
    return (
      <div className="col">
      <div className="accordion" id="accordionExample">
        
        {this.getData()}
        
      </div>
    </div>
    );
  }
}

export default NoteList;
Bùi Hiếu @buihieubthc2rb
Nov 14th, 2019 12:43 PM

Bạn có thể cho mình xem source code hiện tại đang như nào không nhỉ?

0
| Reply
Share
Dũng @quocdungabc
Nov 14th, 2019 12:50 PM

@buihieubthc2rb : mình thêm vào rồi, nhờ Hiếu xem dùm.

0
| Reply
Share

3 ANSWERS


Answered Nov 14th, 2019 4:54 PM
Accepted
+1

Theo mình là do đoạn này

  let layDuLieu = firebase.database().ref('dataForNote');
    let arrayData = []; //mảng này sẽ xài đến nó bên dưới
    layDuLieu.on('value', (notes) => {

Không có full code nên mình cũng không dám chắc nhưng theo mình hiểu chỗ này sẽ bị gán lại dữ liệu nhưng do array cũ đã có dữ liệu nên bạn push vào array là nối thêm dữ liệu lại lần nữa => trùng lặp

Bạn cho let arrayData vào tronglayDuLieu.on('value', (notes) => {....})`

    layDuLieu.on('value', (notes) => {

 let arrayData = []; //mảng này sẽ xài đến nó bên dưới
      notes.forEach(element => {
        const key = element.key;
        const title = element.val().title;
        const content = element.val().content;
        arrayData.push({
          key:key,
          title:title,
          content:content
        }) 
      });
      
      this.setState({
        dataFirebase:arrayData
      })
      
    })
Share
Phan Kiệt @phankiet.it
Nov 14th, 2019 6:54 PM

Bạn thử log ra data trước khi render xem nó chạy như nào @@

0
| Reply
Share
Dũng @quocdungabc
Nov 15th, 2019 2:02 AM

Pác thật thiên tài, giờ nó chạy như đúng rồi luôn. Đa tạ pác nha. Cho let array vào trong, đúng là chỗ đó.

0
| Reply
Share
Dũng @quocdungabc
Nov 15th, 2019 2:03 AM

@phankiet.it : mình có log vài cái ra thử, nhưng cơ bản kỹ thuật test lỗi còn kém quá nên log ra xong mình cũng ko hình dung được nên ko bit làm j tiếp 😄.

0
| Reply
Share
Answered Nov 14th, 2019 1:36 PM
0

Theo mình bạn có thể tham khảo lại câu hỏi này(đã được trả lời): https://viblo.asia/q/goi-api-fetch-data-trong-componentwillmount-hay-componentdidmount-pmleJawM5rd Có vẻ vấn đề ở hàm UNSAFE_componentWillMount() thật.

Share
Dũng @quocdungabc
Nov 14th, 2019 1:42 PM

ok để mình đọc thử.

0
| Reply
Share
Dũng @quocdungabc
Nov 14th, 2019 2:39 PM

Sao mình đổi thành componentDidMount() mà nó cũng vậy ah.

0
| Reply
Share
Answered Nov 14th, 2019 2:25 PM
0

bạn kiểm tra state trong didmount xem

Share
Dũng @quocdungabc
Nov 14th, 2019 2:40 PM

ah componentDidMount mình ko có dùng, nên làm sao kiểm tra ạ.

0
| Reply
Share
Nov 15th, 2019 1:09 AM

@quocdungabc thêm vào, rồi bạn kiểm tra xem state có giống element đc render ra ko.

0
| Reply
Share