01/10/2018, 08:19

Truyền mảng thông qua props vào ListView trong React-Native

Mình truyền 1 mảng từ state trong Main.js vào WatchRecord.js thông qua props để đổ data vào ListView trong WatchRecord.js Nhưng khi chạy thì cứ bị báo là cái mảng đó không có dữ liệu. Khi render trong ListView không có dòng dữ liệu nào cả. Trong khi mình dùng phương thức map thì nó vẫn render được những dữ liệu trong mảng laps mà mình vừa truyền. Ai có thể giúp mình với. Mới đầu mình nghĩ đơn giản là đã chuyền được mảng qua props rồi thì chỉ cần đổ và ListView là xong. Không ngờ là lại gặp lỗi này. Chả biết tại sao.

Hoang Kien viết 10:22 ngày 01/10/2018

Mình truyền mảng tĩnh từ main sang thì dc mà ko hiểu sao chuyển mảng trong state thì lại ko dc

Ai Android viết 10:22 ngày 01/10/2018

ban đầu render main thì this.state.laps = [] ; lúc đó nó render thằng con WatchRecord, cái hàm constructor nó tạo ra từ đầu nên khi bạn change state của thằng main thì vào WatchRecord nó sẽ lấy cái ref cũ ,
bạn thử log ra ở hàm componentWillReceiveProps(nextProps, nextStates) xem nó có nhận được mảng laps mới không là thấy

Hoang Kien viết 10:34 ngày 01/10/2018

Bạn nói rõ hơn dc ko? Mình mới học cái này nên hơi gà mờ . Mình thấy có ví dụ trên mạng nó truyền thẳng mảng vào luôn. Mình làm theo mà nó ko chạy @@

Ai Android viết 10:24 ngày 01/10/2018

Nó sẽ truyền vào nhưng ở trong WatchRecord bạn không bắt nó đúng chỗ thôi
có thể vấn đề là bạn đã truyền >=2 lần và lần đầu thì state.laps của bạn = [];
lần đầu thì object WatchRecord sẽ được tạo => nhảy vào constructor, nhưng những lần sau thì không vào constructor nữa nên mặc dù props có thay đổi nhưng bạn không nhận được state.dataSource mới vì đã update đâu
bạn thử thêm
componentWillReceiveProps(nextProps, nextStates){ console.log(nextProps.laps);}
xem có data bạn truyền vào ở các lần sau ko.
Chú ý life cycle trong react là bạn sẽ hiểu.

Hoang Kien viết 10:23 ngày 01/10/2018

thanks bạn nhiều, mình đã hiểu nguyên nhân nó không update ListView rồi. Giờ bạn có thể nói rõ hơn về life cycle trong react-native được không ?? Trước mình chỉ biết constructor => componentWillMount => render => componentDidMuont. Thứ 2 là mình không biết update lại data như thế nào cho đúng. Mình copy mấy dòng trong constructor vào hàm componentWillReceiveProps vì mình hiểu là khi update thì hàm này được gọi và nó sẽ cập nhật lại dataSource.

 var ds = new ListView.DataSource({rowHasChanged:(r1,r2)=>r1!=r2});
    this.state = {
      dataSource: ds.cloneWithRows(this.props.laps)
    };

Làm như thế thì nó chạy nhưng mình biết là không đúng. Mong bạn thông não cho

Ai Android viết 10:23 ngày 01/10/2018

nó như thế này bạn:
constructor => componentWillMount => render => componentDidMount
từ chỗ này khi truyền props hay change state thì
componentWillReceiveProps(nextProps, nextStates)
shouldComponentUpdate(nextProps, nextStates)
render
componentDidUpdate

và cuối cùng khi giải phóng thì trước đó nó call
componentWillUnmount

Ai Android viết 10:33 ngày 01/10/2018

data thì update có 2 kiểu đó bạn,
1 là bạn change props tức là truyền từ cha vào con
khi change props ở cha (mà thực ra không cần change, thằng cha bị render lại là nó sẽ nhảy vào componentWillReceiveProps(nextProps, nextStates) ) trong hàm này thì như tên biến đó
props cũ của bạn là this.props còn props mới là nextProps

  • và đến đây thì nếu bạn ko implement gì thêm => trong hàm render thì this.props bây h đã là props mới nên bạn có thể xử lí update đây cũng đc
  • nếu implement (override) shouldComponentUpdate(nextProps, nextStates) thì h việc element này có được render hay không là phụ thuộc vào hàm này trả về true (có render) / false (stop ở đây , ko render) 2 cái params thì í nghĩa giống hàm componentWillReceiveProps

cách 2 là bạn change state thằng con tự change khi cần, thì nó cũng giống như trên nhưng là this.states với, nextStates. chú ý là khi muốn change state thì gọi this.setState(newState); chứ ko phải như bạn gọi đâu nhé

Hoang Kien viết 10:23 ngày 01/10/2018

Mình hiểu rồi Thank bạn nhiều . Làm mấy hôm nay vật lộn vs nó mà ko biết sai ở đâu. Thấy bạn có kiến thức sâu về phần này. Bạn có thể viết bài hướng dẫn chia sẻ kinh nghiệm hoặc tài liệu để mọi người học tập ko? Mình thấy tài liệu về cái này khá ít.

Pete Houston viết 10:30 ngày 01/10/2018

Làm mấy hôm nay vật lộn vs nó mà ko biết sai ở đâu. Thấy bạn có kiến thức sâu về phần này. Bạn có thể viết bài hướng dẫn chia sẻ kinh nghiệm hoặc tài liệu để mọi người học tập ko? Mình thấy tài liệu về cái này khá ít.

reactjs.org

React.Component – React

A JavaScript library for building user interfaces

Bài liên quan
0