Saya telah belajar lebih banyak tentang komponen fungsi React.js dan telah mulai mentransisikan salah satu aplikasi React.js saya untuk menggunakannya daripada komponen reaksi standar. Dalam komponen reaksi saya, saya telah membuat panggilan AJAX/API dalam fungsi componentDidMount(). Karena fungsi itu tidak ada di komponen fungsi, saya tidak yakin di mana harus meletakkannya.

Saya tidak dapat menemukan jawabannya di situs React.js, satu-satunya halaman yang dapat saya temukan di AJAX dan API menunjukkan pembuatan panggilan tersebut dengan komponen standar reaksi dalam fungsi componentDidMount().

0
rag9 30 Oktober 2019, 23:49

2 jawaban

Jawaban Terbaik

Inilah yang diberikan React hooks kepada kita - cara untuk melakukan efek samping pada komponen fungsional:

https://reactjs.org/docs/hooks-effect.html

Dari halaman dokumen:

Jika Anda terbiasa dengan metode siklus hidup kelas React, Anda dapat menganggap useEffect Hook sebagai gabungan componentDidMount, componentDidUpdate, dan componentWillUnmount.

Sebagai contoh:

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    //do an ajax call here
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
3
user3692823 30 Oktober 2019, 21:03

Anda dapat menggunakan react-pure-lifecycle untuk menambahkan fungsi siklus hidup ke komponen fungsional.

Contoh:

import React, { Component } from 'react';
import lifecycle from 'react-pure-lifecycle';

const methods = {
    componentDidMount(props) {
    //ajax call here
    }
};

const Channels = props => (
      <h1>Hello</h1>
  )

export default lifecycle(methods)(Channels);
1
Saqib Naseeb 30 Oktober 2019, 21:01