react-native - 回答另一个调查问题回来后，我需要显示已检查的项目

问题描述

我正在执行调查，其中对于第一个调查问题，我将复选框的选中项目存储到对象数组中，并且在回答第二个问题后，当我回到第一个问题时，我想显示以前选中的项目。任何帮助表示赞赏。谢谢你

我在其中存储复选框的选中项的数组：

Array[
   Object{
    "QuestionId" : 4,
    "answers" : Array[
               Object {
              "SurveyAnswer":"Pasta",
              "UniqueID":16,
              "isCheck":true,
          },
   Object {
     "SurveyAnswer":"Ganji",
     "UniqueID":17,
     "isCheck":true,
          },
        ],
       },
      ]

如图所示，单击下一步按钮将出现第二组问题，其中包含上一个按钮。第一组问题的图像

代码：

const SurveyList = ({questionid, navigation }) => {
      let newList = [];
      let resArray =[];
      let arraylength;
      let index;
      let data=[];
      let optlist=[];
      let selectedAnswers=[];
      let qustnId=[];
      var result=[];
          const [FontReady, setFontReady] = useState(false);   
const [value1, setValue1] = React.useState('');
const [value2, setValue2] = React.useState('');
const [selected,setselected]=useState('');
const [list, setList] = useState([]);
const [optionlist,setoptionlist]=useState([]);
const [spin, setSpin] = useState(false);
const [errMsg, setErrMsg] = useState(false);
const [category,setcategory] = useState('');
const [endIndex,setendIndex] = useState('');
const [interData,setinterData] = useState('');
const [checkBool1, setcheckBool1] = useState(false);
const [selectedFruits, setSelectedFruits] = useState([]);

const onValueChange = (item, index) => {
    console.log("item "+index);
    const newData = [...optionlist];
    newData[index].isCheck =!item.isCheck;
    genericConsole.consoleFunction("newdata arr-"+newData[index].isCheck);
    setoptionlist(newData);
     result = newData.filter(obj => {
        return obj.isCheck === true
    })
    console.log("array-----")
    console.log(optionlist);
    console.log(result)
}
const getData = async (variable,indexVal) => {
    const value = await AsyncStorage.getItem('token');
    // setindexVal(index);
    index=indexVal;
    setSpin(true);
    let config = {
        method: 'POST',
        url: '/api/RYH/getSurveyById',
        headers: {
            Authorization: value
        },
        data: {
            "ID": variable
        }
    };
    genericConsole.consoleFunction(config);

    try {
        return axios(config).then((response) => {
            setSpin(false);
            genericConsole.consoleFunction(response.data);
            setList(null);
            
            arraylength=response.data.length;
            newList =  response.data[indexVal].Question;
            optlist = response.data[indexVal].answers;
            setList(newList);
            setoptionlist(optlist);
            qustnId=response.data[indexVal].QuestionID;
            setcategory(response.data[indexVal].Type)
            genericConsole.consoleFunction("!!!!!");
             genericConsole.consoleFunction(qustnId);
             

        })
    } catch (err) {
        genericConsole.consoleFunction(err);
    }
}

const nextData = () =>
{
    
       index=index+1;
       genericConsole.consoleFunction("---"+index);
       
       selectedAnswers.push({
        QuestionId: qustnId,
        
        answers: result
      });
      genericConsole.consoleFunction("answers stored");
      genericConsole.consoleFunction(selectedAnswers);
       getData([questionid],index);
      
       if(index==arraylength-1){
        setendIndex("true");
        genericConsole.consoleFunction("---"+endIndex);
       }
       else if(index!=0 && index!=arraylength-1)
       {
        setinterData("true");
       }
    
    
}
const prevData = () =>
{
    index=index-1;
    setendIndex("false");
    getData([questionid],index);
    genericConsole.consoleFunction("answers stored after clicking prev btn---");
      genericConsole.consoleFunction(selectedAnswers);
}

let [fontsLoaded] = useFonts({
    'Avenir-Roman': require('../../assets/fonts/Avenir-Roman.ttf'),
    'Avenir-Book': require('../../assets/fonts/Avenir-Book.ttf'),
    'Avenir-Heavy': require('../../assets/fonts/Avenir-Heavy.ttf'),
    'Avenir-Medium': require('../../assets/fonts/Avenir-Medium.ttf'),
    'Helvetica': require('../../assets/fonts/Helvetica.ttf'),
});

useEffect(() => {
    getData([questionid],0);
    setFontReady(true);
    console.disableYellowBox = true;
}, []);
if (!fontsLoaded) {
    return <AppLoading />;
}
else {
    return (<View >
        <View>
        </View>
        <Col style={styles.container}>
                    <Row size={15}><Text style={styles.categoryText}>{newList}</Text></Row>
                    {category=='Checkbox' && 
                        optlist.map((item, index) => {console.log("item--"+index)
                           
                            return <Row>
                             <CheckBox
                title={item.SurveyAnswer}
                checkedIcon={<Image source={require('../../assets/tick_enabled.png')}/>} 
                uncheckedIcon={<Image source={require('../../assets/tick_disabled.png')}/>} 
                containerStyle={{backgroundColor:'transparent', borderColor:'transparent',}}
                checked={item.isCheck || false}
                textStyle={{fontSize:14, color:'#3a3a3a', 
                fontWeight:'normal'}}
                fontFamily={'Avenir-Roman'}
                onPress={(val) => onValueChange(item, index)}
                key={item.SurveyAnswer}
            />                     
               </Row>
                          
                            }) 
                
                        }
      </Col>
        {index===0?
          <View  style={styles.generate}>
           <TouchableOpacity onPress={() =>nextData(index) } >
                        <LinearGradient start={{ x: 0, y: 0 }} end={{ x: 1, 
                      y: 0 }} colors={['#fc6f77', '#ffa476']} style={{ 
                      height: 40, borderRadius: 20, paddingHorizontal: '10%' 
                       }}>
                       
                            <Text style={styles.generateText}>Next</Text>
                        </LinearGradient>
                    </TouchableOpacity>
                    </View>:null
                    }
                   
                     { interData=="true" ?
                  
                  <View style={{flexDirection:'row'}}>
                      <TouchableOpacity  onPress={() =>prevData(index) } >
                      <LinearGradient start={{ x: 0, y: 0 }} end={{ x: 1, y: 
                       0 }} colors={['#fc6f77', '#ffa476']} style={{ height: 
                      40, borderRadius: 20, paddingHorizontal: '10%' }}>
                     
                          <Text style={styles.generateText}>Back</Text>
                      </LinearGradient>
                     </TouchableOpacity>
                  <TouchableOpacity   >
                      <LinearGradient start={{ x: 0, y: 0 }} end={{ x: 1, y: 
                        0 }} colors={['#fc6f77', '#ffa476']} style={{ height: 
                           40, borderRadius: 20, paddingHorizontal: '10%' }}>
                     
                          <Text style={styles.generateText}>Next</Text>
                      </LinearGradient>
                  </TouchableOpacity>
                  </View>:null
                 
                  }
                     { endIndex=="true" ?
                  
                    <View style={{flexDirection:'row'}}>
                        <TouchableOpacity  onPress={() =>prevData(index) } >
                        <LinearGradient start={{ x: 0, y: 0 }} end={{ x: 1, 
                           y: 0 }} colors={['#fc6f77', '#ffa476']} style={{ 
                          height: 40, borderRadius: 20, paddingHorizontal: 
                          '10%' }}>
                       
                            <Text style={styles.generateText}>Back</Text>
                        </LinearGradient>
                    </TouchableOpacity>
                    <TouchableOpacity   >
                        <LinearGradient start={{ x: 0, y: 0 }} end={{ x: 1, 
                             y: 0 }} colors={['#fc6f77', '#ffa476']} style={{ 
                             height: 40, borderRadius: 20, paddingHorizontal: 
                             '10%' }}>
                       
                            <Text style={styles.generateText}>Finish</Text>
                        </LinearGradient>
                    </TouchableOpacity>
                    </View>:null
                   
                    }
                     </View>
                    )
                     }
                     }

标签： react-nativecheckboxstoragedisplaychecked

react-native - 回答另一个调查问题回来后，我需要显示已检查的项目

问题描述

解决方案

推荐阅读