сборщик не работает правильно внутри списка - PullRequest
Новая
       19

сборщик не работает правильно внутри списка

0 голосов
/ 08 октября 2019

Внутри каждого элемента списка плоского списка у нас есть средство выбора для выбора значения, но когда мы меняем значение средства выбора, оно изменяется и сразу же обновляется для всех других строк. Это происходит только тогда, когда мы применяем плоский список, но за пределами плоского списка это было нормально. Кто-нибудь может нам помочь, как решить проблему. 

 import React from 'react';
import { Text, View,FlatList,Image,StyleSheet ,ScrollView, TextInput,TouchableOpacity,Alert 
 } from 'react-native';
import {  Picker ,Icon} from "native-base";
  var gradeInputs= [];
 var  hoursInput =[];
 var grades_list   =[
     {
  "course": "BIO-110",
  "TITLE": "أحياء عامة )1(",
     "hours":"2"
    }
   ,
          {
       "course": "CHEM-110",
      "TITLE": "كيمياء عامة )1(",
    "hours":"4"
 }
   ,
   {
   "course": "ELCS-100",
   "TITLE": "لغة انجليزية",
     "hours":"3"
 }
,
      {

     "course": "STAT-110",
       "TITLE": "احصاء عام )1(",
        "hours":"3"

     }

         ];
     export default class calculate_gpa extends React.Component {
       constructor(props)
       {

      super(props);
         this.state = {
     selected: "A+"
     };
    }
          onValueChange(value ) {
        this.setState({
            selected: value
    });
 }
 render( ) {
   return(  
      <View style={{flex:1}} >
     <ScrollView   >
         <Text style={{  fontSize:20,fontWeight: 'bold',
       fontFamily: "DroidKufiReqular",}}>{"\n"} أدخل الدرجة المتوقعة لكل مادة{"\n"}</Text>


     <FlatList
       data={ grades_list}
          maxHeight={400}
         renderItem={({ item, index }) =>
         <View    key={item.id}>
          <View style={{ justifyContent: 'center',
                 alignItems: 'center' ,
                marginTop:'7%', }}>


        </View >
     <View   style={{
          justifyContent: 'space-between',
         flexDirection:'row',
       alignItems:'center',
       marginTop:0,
        }}>
       <View style={{ width: '16.5%', alignItems:'center' , top:-20 }}>
       <Text style={{   textAlign: "center",}}>{item.course}</Text>  
        </View>
        <View  style={{   width: '20%', alignItems:'center',  top:-15   }}>
          <Text style={{ fontFamily: "DroidKufiRegular",
        }}>{item.TITLE}</Text> 
       </View>
            <View style={{  width: '20%', alignItems:'center' , top:-20,marginRight:0 }}>
               <Picker style={{borderStyle:'solid',height: 50, width: 120}}
          mode="dropdown"
          iosIcon={<Icon name="arrow-down" />}
          headerBackButtonText="Baaack!"
          selectedValue={this.state.selected}
          onValueChange={this.onValueChange.bind(this)}
        >
          <Picker.Item label="A+" value="4.5" />
          <Picker.Item label="A" value="4" />
          <Picker.Item label="B+" value="3.5" />
          <Picker.Item label="B" value="3" />
          <Picker.Item label="C+" value="2" />
        </Picker>

      </View>
     <View style={{width: '16.5%', alignItems:'center', top:-15 }}>
      <Text style={{   textAlign: "center"}}>{item.hours}</Text>  
         </View> 
          </View>
        </View>
       }
       keyExtractor={item => item.id } 
       extraData={this.state}
     />
  <View style={{  justifyContent: 'center',
     alignItems: 'center',}}>
       <TouchableOpacity style={[styles.buttonContainer, styles.loginButton]}
       >
           <Text style={styles.loginText}>احتسب معدلك</Text>
       </TouchableOpacity>
       </View>
       </ScrollView >
    </View>
       );

      }}

         const styles = StyleSheet.create({
    buttonContainer: {
     height:60,
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
     marginBottom:15,
     width:250,
     borderRadius:30,
     marginTop:20,

   },
   loginButton: {
     backgroundColor: "#87dc9b",
   },
   loginText: {
     color: 'white',
       fontSize:20,
        fontFamily: "DroidKufiBold",
      },
        })

1 Ответ

0 голосов
/ 23 октября 2019

, потому что вы используете одно значение state.selected для всех элементов плоского списка и, следовательно, все элементы будут иметь одинаковое значение. то, что вы можете сделать, это использовать объект в состоянии, где ключи - это индексы плоских списков, а значения - выбранные значения для этого элемента. таким образом, все элементы будут иметь разные выбранные значения.

...