1 Câu hỏi: Làm thế nào để vượt qua một danh sách với các đối tượng từ Máy chủ đến FlatList?

câu hỏi được tạo ra tại Wed, May 8, 2019 12:00 AM

Tôi đang cố gắng tạo một FlatList chứa một mảng với các đối tượng có một mảng từ máy chủ và tôi không thể làm cho nó hoạt động.

thông báo lỗi của tôi:

  

TypeError: Không thể đọc proparty 'Dữ liệu' không xác định

Tôi có thể làm cho nó hoạt động với danh sách bình thường không được tìm nạp từ Máy chủ. Đây là cấu trúc từ danh sách làm việc của tôi

[{"DATA":[{"filter_id":"44","filter_name":"filter 1"}, {"filter_id":"45","filter_name":"filter 2"},{"filter_id":"46","filter_name":"filter 3"},{"filter_id":"47","filter_name":"filter 4"},{"filter_id":"48","filter_name":"filter 5"}],"MESSAGE":"DATA FOUND","STATUS":200}]

Danh sách máy chủ của tôi có cùng cấu trúc nhưng các giá trị khác nhau của filter_name và filter_id

đây là mã của tôi:

constructor(props){
    super(props); 
    this.state = {
    data: [],
    oldData: [{"DATA":[{"filter_id":"44","filter_name":"filter 1"},{"filter_id":"45","filter_name":"filter 2"},{"filter_id":"46","filter_name":"filter 3"},{"filter_id":"47","filter_name":"filter 4"},{"filter_id":"48","filter_name":"filter 5"}],"MESSAGE":"DATA FOUND","STATUS":200}],
    page:1,
    status: null,
    isLoading: false,
    }
}
getData = async () => {
const url = 'http://ollenorstrom.se/ollenorstrom.se/avoka/api/getFilter.php?page='+this.state.page+'&row_per_page=5';
fetch(url).then((response) => response.json())
.then((responseJson) => {
   this.setState({
    data:this.state.data.concat(responseJson),
    isLoading:false
   });
})
}
componentDidMount() {
  this.getData();
}
renderRow = ({item}) => {
  console.log('item', item);
  return (
   <View style={styles.item}>
    <Text>{item.filter_name}</Text>
   </View>
  )
}
render() {
   console.log('state', this.state.data[0]);
   console.log('oldstate', this.state.oldData[0]) // this 
   return (
    <View style={styles.container}>
     <FlatList 
      data={this.state.data[0].DATA}
      renderItem={this.renderRow} 
      keyExtractor={(item, index) => index.toString()}
      />
     </View>
  );
}

Triển lãm:

    
0
1 Câu trả lời                              1                         

Vấn đề là trên kết xuất ban đầu của thành phần this.state.data của bạn trống, vì chúng tôi phải đợi đến getData trả về bất kỳ dữ liệu nào. Đó là lý do tại sao bạn không thể truy cập this.state.data[0].DATA ngay từ đầu.

Giải pháp là cập nhật chức năng getData của bạn một chút.

getData = async () => {
    const url = 'http://ollenorstrom.se/ollenorstrom.se/avoka/api/getFilter.php?page='+this.state.page+'&row_per_page=5';
    fetch(url).then((response) => response.json())
    .then((responseJson) => {
      // here we save the data, we want to access later. 
      console.log('responseJson', responseJson[0].DATA);
       this.setState({
        data:this.state.data.concat(responseJson[0].DATA),
        isLoading:false
       });
    })
  }

Bây giờ dữ liệu của bạn được lưu trữ trực tiếp trong this.state.data. Bây giờ chúng tôi có thể đơn giản hóa chức năng render() của bạn

 <FlatList 
       data={this.state.data} // simplified, passing an empty array at the beginning is ok
       renderItem={this.renderRow} 
       keyExtractor={(item, index) => index.toString()}
      />

Ví dụ hoạt động:

https p>     

1
2019-05-08 16: 23: 10Z
nguồn đặt đây