Phản hồi các tham số truyền gốc thông qua chức năng bản đồ

Question

Tôi chỉ đang học React Native và tôi muốn tạo một chuỗi các nút sử dụng dữ liệu động. mã hiện tại của tôi là:

var locations = this.state.campus.map(function(item, key){ 
      return(
       <TouchableHighlight key={key} 
       style={[styles.button, (this.state.location==={item} && styles.buttonPressed)]} 
       underlayColor='#dddddd' 
       onPress={()=>this.buttonPress({item})} > 
       <Text style={ 
        styles.plainText}>{item}</Text> 
      </TouchableHighlight> 
      ) 

Vấn đề của tôi là với các dòng

style={[styles.button, (this.state.location==={item} && styles.buttonPressed)]} 

và

onPress={()=>this.buttonPress({item})} 

tôi đang cố gắng tạo ra những dòng này bằng cách sử dụng dữ liệu tự động tắt chức năng bản đồ. Những dòng mã hoạt động hoàn hảo nếu tôi sử dụng dữ liệu tĩnh (tức là tạo ra mỗi nút riêng biệt), nhưng không sử dụng dữ liệu động. Mã này tạo ra một màn hình hiển thị để vấn đề không phải là với kết xuất, vấn đề là với chức năng.

Khi nhấn nút Tôi nhận được thông báo lỗi không xác định trong không phải là đối tượng trong khi kiểu chỉ đơn giản là làm cho toàn bộ màn hình không hiển thị.

Rõ ràng là dữ liệu động ({item}) hoạt động bên trong phần tử Văn bản nhưng không được chuyển đến hai phần tử khác dưới dạng dữ liệu. Tôi đã thử sử dụng {{item}} nhưng điều này gây ra lỗi cú pháp.

Có cách nào để xử lý dữ liệu động như thế này trong React Native không?

Answer 1

Trong cả hai trường hợp, bạn không cần thiết phải gói item vào {}. Đối với cả hai dòng này, các biểu thức bên trong {} bên ngoài là javascript thuần túy (một mảng và một hàm) và phải theo cú pháp javascript.

Vì vậy, các dòng nên đọc như sau:

style={[styles.button, (this.state.location===item && styles.buttonPressed)]} 

và

onPress={()=>this.buttonPress(item)} 

Answer 2

Bạn nên lưu trữ này trong một biến khác: hãy _this = này;

Sau đó sử dụng _this thay vì điều này

Answer 3

vấn đề được xảy ra bởi vì bạn đang sử dụng chức năng (item, key) {và bạn phải sử dụng mũi tên chức năng

let locations = this.state.campus.map((item, key) => { return <TouchableHighlight key={key}.. 

bạn phải làm điều đó cho giữ sử dụng 'này' bối cảnh

Answer 4

phương pháp này là công việc: 1) Tạo chức năng để tạo yếu tố với dữ liệu ngay động

createElement = (item) => { 
    return(
     <TouchableHighlight onPress={()=>this.buttonPress({item})}> 
      <Text style={ styles.plainText }> {item} </Text> 
     </TouchableHighlight> 
    ) 
}; 

2) Sử dụng chức năng này vào làm chức năng như thế nào trong tiếp theo Ví dụ:

render (
    elementsList = []; 
    for (var i = 0; i < 10; i++){ 
     elementsList.push(this.createElement(i)); 
    }; 

    return (
     <View> 
      {elementsList} 
     </View> 
    ) 
); 

Nó làm việc, nếu bạn hiểu cách sử dụng này.