REACTJS , Làm sao để trigger một Function từ một component khác không có quan hệ gì

Question

Chào các bạn, mình có vấn đề này nhờ mn giúp đỡ.

Answer

Ý tưởng ở đây đơn giản là gọi lại hàm thì bạn có thể tạo ra 1 listener ở bên PostList và trigger nó ở bên PostForm.
Có rất nhiều thư viên hỗ trợ làm trò này:
https://github.com/facebook/emitter
https://nodejs.org/api/events.html

Answer

trong sandbox của bạn thì 2 component đang ko có liên hệ gì, về lý thuyết là không thể nhé, tuy nhiên mình giả sử bạn sẽ render 2 component PostForm và PostList trong component App thì sẽ giải quyết như sau:  
- Như mình nói thì 2 Component sẽ cần có mối liên hệ, ở đây 2 component đều được render trong component App, thì đó chính là mối liên hệ, function getPostList thay vì đặt trong component PostList thì đặt ở trong component App, và truyền function đó xuống cả 2 component PostForm và PostList (data nhận được là postList cũng truyền xuống component PostList dưới dạng props)
--> đây là flow hoạt động của component trong React, khi 2 component cần giao tiếp với nhau, thì chúng giao tiếp thông qua Component chung (component cha hoặc lớn hơn cha như ông, cụ,... :v )
- khi app lớn lên việc quản lý sẽ khó hơn nên bạn sẽ nên biết thêm các công cụ quản lý state như redux hay mobx hoặc dùng Context API của React (cái này thì khó dùng hơn 2 thằng kia nhưng ko cần cài thêm lib), cho phép bạn gọi trực tiếp function mà không cần truyền props qua nhiều lớp component. Anw, với bài toán hiện tại của bạn thì cứ làm như trên để hiểu đã nhé.

Answer

Theo mình hiểu thì ý tưởng của bạn là sau khi tạo mới sẽ gọi lại hàm getPostList để đẩy bài viết đó vào state, hiện ra view.

Để làm được điều này thì có 2 cách:

Bạn có thể tìm hiểu thêm về Redux Saga, ở đây chúng ta sẽ có một store lưu trữ dữ liệu chung, mỗi khi bạn postForm mới xong, bạn đẩy post đó vào store, ở phía postList bạn chỉ cần sử dụng các post từ store này, mỗi khi có post mới được đẩy vào store thì bên postList sẽ tự động hiển thị
Nếu bạn không biết về Redux Saga thì có thể tạo ra một Component chung cho 2 component PostForm và PostList, hàm getPostList bạn đặt trong component cha này. Sau đó bạn truyền hàm này vào component PostForm dưới dạng tham số, cứ mỗi khi có post mới được cập nhật bằng PostForm, bạn gọi đến getPostList.

Ở bên PostList, bạn truyền cho nó tham số post được lấy từ state của Component chung

// Component chung

state = {
    posts: ""
  };

  componentDidMount() {
    this.getPostList();
  }

  getPostList = () => {
    const response = fetch("GET", "blog/post-list");
    if (response.stattus === 200) {
      this.setState({
        posts: response.data
      });
    }
  };

render {
    const { posts } = this.state;
   return ( <div>
            <PostForm getPostList={this.getPostList} />
            <PostList posts={posts} />
    </div> )
}

) } ```

Answer

Bạn thử tìm hiểu về redux xem sao. Nó sẽ có 1 store để lưu dữ liệu và tất cả các component của bạn đều có thể lấy được dữ liệu từ store đó

4 CÂU TRẢ LỜI