【问题标题】:How to select radio buttons separately in a flatlist react-native如何在 flatlist react-native 中分别选择单选按钮
【发布时间】:2022-01-04 11:00:48
【问题描述】:

我从带有问题和问题选项的 api 获取数据。每个问题都有 4 个选项可供选择。我已将结果呈现在平面列表中。当我选择单选按钮时,我无法保存每个问题的值。 看看我的代码:

const Step3 = () => {
  const [questions, setQuestions] = useState([]);
  const [values, setValue] = useState()
  const getQuestions = async () => {
    const locale = 'sq'; // TODO: get current locale
    const response = await apiStandarts.get(`/questions?locale=${locale}`, {
      params: { _limit: MAX_QUESTIONS, active: 1, _sort:'sortId:ASC' },
    });
    setQuestions(response.data);
  };
  
  useEffect(() => {
    getQuestions();
  }, []);

  const OptionList = (groupOption) => {
    return (
      <FlatList
        data={groupOption.options}
        keyExtractor={(result) => result.id.toString()}
        renderItem={({ item, index}) => {
          const clickedRadio = () => {
            setValue(item.id)
          }
          return (
            <View key={index}>
              <Radio label={item.description} onChange={()=> clickedRadio() } />
            </View>
          );
        }}
      />
    );
  };

  return (
    <View style={styles.container}>
      <Text style={{ fontWeight: "bold", fontSize: 16, color: "#6B24AA" }}>
        {t("Choose an option/Scroll for more questions")}
      </Text>
      <FlatList
        data={questions}
        keyExtractor={(result) => result.id.toString()}
        renderItem={({ item, index }) => {
          return (
            <View style={styles.groupOptions} key={index}>
              <Text>{item.description}</Text>
              <OptionList options={item?.question_options}></OptionList>
            </View>
          );
        }}
      />
    </View>

  )
}

这是数据结构:

[
   {
      "id":11,
      "description":"A ka organizata juaj politika dhe procedura të brendshme organizative si pjesë e të cilave parashikohet qartë mënyra e ngritjes së fondeve dhe e manaxhimit të tyre në mënyrë etike?",
      "active":true,
      "sortId":11,
      "locale":"sq",
      "published_at":"2021-06-10T13:56:39.618Z",
      "created_at":"2021-06-10T13:56:36.456Z",
      "updated_at":"2021-10-06T09:18:29.403Z",
      "organization_evaluation":null,
      "questId":11,
      "question_options":[
         {
            "id":44,
            "question":11,
            "description":"Organizata ka politika dhe procedura të brendshme organizative si pjesë e të cilave parashikohet shumë qartë mënyra e ngritjes së fondeve dhe e manaxhimit të tyre në mënyrë etike.",
            "points":4,
            "active":true,
            "icon":null,
            "locale":"sq",
            "published_at":"2021-06-10T14:15:34.685Z",
            "created_at":"2021-06-10T14:15:31.675Z",
            "updated_at":"2021-12-06T09:53:00.315Z",
            "question_option_suggestion":{
               "id":53,
               "question_option":44,
               "description":"Kjo është një praktikë shumë e mirë  për mundësimin e qendrueshmërisë organizative dhe transparencën e llogaridhënien më të gjithë grupet e interesit. Është e rëndësishme që këto procese të mbahen dhe mësimet e nxjerra të ndahen, në mënyrë që organizatat e tjera të mund të ndjekin këtë shembull. ",
               "active":true,
               "locale":"sq",
               "published_at":"2021-11-24T13:20:34.873Z",
               "created_at":"2021-11-22T13:55:53.026Z",
               "updated_at":"2021-12-06T09:53:00.317Z"
            },
            "organization_evaluation":null,
            "questOptionId":44,
            "sort":4
         },
         {
            "id":41,
            "question":11,
            "description":"Organizata nuk ka politika dhe procedura të tilla.",
            "points":1,
            "active":true,
            "icon":null,
            "locale":"sq",
            "published_at":"2021-06-10T14:13:20.937Z",
            "created_at":"2021-06-10T14:13:17.713Z",
            "updated_at":"2021-12-06T09:51:40.886Z",
            "question_option_suggestion":{
               "id":50,
               "question_option":41,
               "description":"Të paturit e praktikave të qarta dhe të formalizuara për mbledhjen e fondeve dhe përdorimin e menaxhimin etik të tyre, është një praktikë e këshillueshme pasi përbën një mjet për rritjen e qendrueshëmrisë së organizatës, uljen e varësisë nga një burim i caktuar fondesh, dhe krijimin e mundësisë për të qenë novator e i suksesshëm. Gjithashtu këto praktika garantojnë njohjen gjerësisht të burimeve nga të gjitha palët e interesuara. Kjo do të sjellë më shumë transparencë dhe të përmirësojë përgjegjshmërinë.",
               "active":true,
               "locale":"sq",
               "published_at":"2021-11-24T13:20:22.267Z",
               "created_at":"2021-11-22T13:54:07.049Z",
               "updated_at":"2021-12-06T09:51:40.889Z"
            },
            "organization_evaluation":null,
            "questOptionId":41,
            "sort":1
         },
         {
            "id":42,
            "question":11,
            "description":"Organizata nuk ka politika dhe procedura të tilla por ndjek disa parime të përgjithshme etike në ngritjen e fondeve dhe manaxhimin e tyre.",
            "points":2,
            "active":true,
            "icon":null,
            "locale":"sq",
            "published_at":"2021-06-10T14:13:57.687Z",
            "created_at":"2021-06-10T14:13:49.677Z",
            "updated_at":"2021-12-06T09:52:12.383Z",
            "question_option_suggestion":{
               "id":51,
               "question_option":42,
               "description":"Të paturit e praktikave të qarta dhe të formalizuara për mbledhjen e fondeve dhe përdorimin e menaxhimin etik të tyre, është një praktikë e këshillueshme pasi përbën një mjet për rritjen e qendrueshëmrisë së organizatës, uljen e varësisë nga një burim i caktuar fondesh, dhe krijimin e mundësisë për të qenë novator e i  suksesshëm. Gjithashtu këto praktika garantojnë njohjen gjerësisht të burimeve nga të gjitha palët e interesuara. Kjo do të sjellë më shumë transparencë dhe të përmirësojë përgjegjshmërinë.",
               "active":true,
               "locale":"sq",
               "published_at":"2021-11-24T13:20:26.501Z",
               "created_at":"2021-11-22T13:54:46.944Z",
               "updated_at":"2021-12-06T09:52:12.385Z"
            },
            "organization_evaluation":null,
            "questOptionId":42,
            "sort":2
         },
         {
            "id":43,
            "question":11,
            "description":"Organizata ka politika dhe procedura të brendshme organizative si pjesë e të cilave ka parashikime të përgjithshme mbi mënyrën e ngritjes së fondeve.",
            "points":3,
            "active":true,
            "icon":null,
            "locale":"sq",
            "published_at":"2021-06-10T14:14:54.428Z",
            "created_at":"2021-06-10T14:14:51.561Z",
            "updated_at":"2021-12-06T09:52:39.514Z",
            "question_option_suggestion":{
               "id":52,
               "question_option":43,
               "description":"Zhvillimi dhe përditësimi i vazhdueshëm i praktikave të tilla, në varësi dhe të dinamikave zhvillimore të organizatës, siguron një përqasje novatore lidhur me garantimin e qendrueshmërisë së organizatës. Këshillohet që këto politika të jenë të mirë detajuara, duke mundësuar jo vetëm një njohje sa më të gjerë nga të gjithë grupet e interesit në kuadër të transparencës dhe llogaridhënies, por dhe zbatim të saktë të tyre në të gjithë nivelet hirarkike.",
               "active":true,
               "locale":"sq",
               "published_at":"2021-11-24T13:20:31.381Z",
               "created_at":"2021-11-22T13:55:27.990Z",
               "updated_at":"2021-12-06T09:52:39.518Z"
            },
            "organization_evaluation":null,
            "questOptionId":43,
            "sort":3
         }
      ],
      "commitments":[
         {
            "id":5,
            "name":"Financim, Ngritje Fondesh dhe Manaxhim i Burimeve",
            "icon":"fa-pencil",
            "primary_color":"#348D73",
            "secondary_color":"#06C088",
            "active":true,
            "published_at":"2021-05-13T08:09:20.077Z",
            "created_at":"2021-05-13T08:09:11.107Z",
            "updated_at":"2021-07-26T10:25:26.204Z",
            "icon_color":"#33D0A1",
            "locale":"sq",
            "commitments_icon":5,
            "commitment_icon":5,
            "color_palette":"light_blue",
            "link":"/financing",
            "sortId":3
         }
      ]
   },
   {
      "id":13,
      "description":"A kryen organizata juaj vlerësime periodike të performancës të punonjësve dhe si? ",
      "active":true,
      "sortId":13,
      "locale":"sq",
      "published_at":"2021-06-10T13:57:37.862Z",
      "created_at":"2021-06-10T13:57:34.723Z",
      "updated_at":"2021-10-06T09:18:57.834Z",
      "organization_evaluation":null,
      "questId":13,
      "question_options":[
         {
            "id":51,
            "question":13,
            "description":"Vlerësimi i performancës së punonjësve bëhet periodikisht me afate të përcaktuara, , përmes një procedure të formalizuar,  por vetëm nga drejtuesi i organizatës.",
            "points":3,
            "active":true,
            "icon":null,
            "locale":"sq",
            "published_at":"2021-06-10T14:20:35.874Z",
            "created_at":"2021-06-10T14:19:48.983Z",
            "updated_at":"2021-12-06T09:55:01.718Z",
            "question_option_suggestion":{
               "id":60,
               "question_option":51,
               "description":"Kjo është një praktikë e mirë organizative e cila mund të përmirësohet më tej me përfshirjen në procedurë jo vetëm të drejtuesit të organizatës por dhe niveleve të tjera të hierarkisë. Kjo përfshirje ofron një këndvështrim më të gjerë të vlerësimit të përformancës në raport dhe me pjesën tjetër të stafit kryesisht supervizues. ",
               "active":true,
               "locale":"sq",
               "published_at":"2021-11-24T13:21:05.079Z",
               "created_at":"2021-11-22T14:02:42.810Z",
               "updated_at":"2021-12-06T09:55:01.724Z"
            },
            "organization_evaluation":null,
            "questOptionId":51,
            "sort":3
         },
         {
            "id":49,
            "question":13,
            "description":"Organizata jonë nuk kryen vlerësime periodike të  performancës së punonjësve.",
            "points":1,
            "active":true,
            "icon":null,
            "locale":"sq",
            "published_at":"2021-06-10T14:19:03.812Z",
            "created_at":"2021-06-10T14:18:56.048Z",
            "updated_at":"2021-12-06T09:54:26.197Z",
            "question_option_suggestion":{
               "id":58,
               "question_option":49,
               "description":"Vlerësimi i performancës së burimeve njerëzore është një aspekt shumë i rëndësishëm për të analizuar ecurinë e organizatës, rregullimet e mundshme që mund të nevojiten, si dhe për të mbledhur komente dhe sugjerime nga stafi dhe vullnetarët e organizatës. Kryerja e një praktike të tillë është shumë e këshillueshme të zhvillohet.",
               "active":true,
               "locale":"sq",
               "published_at":"2021-11-24T13:20:55.365Z",
               "created_at":"2021-11-22T13:59:19.528Z",
               "updated_at":"2021-12-06T09:54:26.199Z"
            },
            "organization_evaluation":null,
            "questOptionId":49,
            "sort":1
         },
         {
            "id":50,
            "question":13,
            "description":"Organizata jonë kryen vlerësime periodike të performancës të punonjësve por jo sipas një planifikimi dhe procedure të formalizuar.",
            "points":2,
            "active":true,
            "icon":null,
            "locale":"sq",
            "published_at":"2021-06-10T14:19:36.859Z",
            "created_at":"2021-06-10T14:19:30.174Z",
            "updated_at":"2021-12-06T09:54:43.753Z",
            "question_option_suggestion":{
               "id":59,
               "question_option":50,
               "description":"Vlerësimi i performancës së burimeve njerëzore është një aspekt shumë i rëndësishëm për të analizuar ecurinë e organizatës, rregullimet e mundshme që mund të nevojiten, si dhe për të mbledhur komente dhe sugjerime nga stafi dhe vullnetarët e organizatës. Kryerja e një praktike të tillë është shumë e këshillueshme të zhvillohet, sipas një procedure të formalizuar në mënyrë periodike.",
               "active":true,
               "locale":"sq",
               "published_at":"2021-11-24T13:20:59.427Z",
               "created_at":"2021-11-22T13:59:50.511Z",
               "updated_at":"2021-12-06T09:54:43.755Z"
            },
            "organization_evaluation":null,
            "questOptionId":50,
            "sort":2
         },
         {
            "id":52,
            "question":13,
            "description":"Vlerësimi i performancës së punonjësve bëhet periodikisht me afate të përcaktuara, , përmes një procedure të formalizuar me përfshirjen dhe vlerësimin e punonjësit dhe të gjitha niveleve hirearkike.",
            "points":4,
            "active":true,
            "icon":null,
            "locale":"sq",
            "published_at":"2021-06-10T14:20:57.838Z",
            "created_at":"2021-06-10T14:20:54.741Z",
            "updated_at":"2021-12-06T09:55:18.506Z",
            "question_option_suggestion":{
               "id":61,
               "question_option":52,
               "description":"Vlerësimi periodik i performancës së punonjësve, nëpërmjet një procedure të formalizuar dhe me përfshirjen e të gjitha niveleve hierarkike, është një praktikë e mirë institucionale. Është e rëndësishme që këto praktika të zhvillohen më tej dhe mësimet e nxjerra gjatë ngritjes së tyre të ndahen, kështu që organizatat e tjera mund të ndjekin këtë shembull.",
               "active":true,
               "locale":"sq",
               "published_at":"2021-11-24T13:21:08.716Z",
               "created_at":"2021-11-22T14:03:21.740Z",
               "updated_at":"2021-12-06T09:55:18.508Z"
            },
            "organization_evaluation":null,
            "questOptionId":52,
            "sort":4
         }
      ],
      "commitments":[
         {
            "id":6,
            "name":"Burime Njerëzore të Mirë Menaxhuara",
            "icon":"fa-pencil",
            "primary_color":"#03BEE7",
            "secondary_color":"#428D9D",
            "active":true,
            "published_at":"2021-05-13T08:10:12.178Z",
            "created_at":"2021-05-13T08:10:08.282Z",
            "updated_at":"2021-07-26T10:25:12.028Z",
            "icon_color":"#027A95",
            "locale":"sq",
            "commitments_icon":6,
            "commitment_icon":6,
            "color_palette":"dark_blue",
            "link":"/managed-human-resources",
            "sortId":7
         }
      ]
   }
]

这是数据的json格式

【问题讨论】:

  • 能否提供一个服务器问题响应样本来了解响应数据的结构
  • @BYIRINGIROEmmanuel 我提供了数据结构,请查看
  • 您可以粘贴为 JSON 数据吗?所以我们可以用真实数据进行测试
  • @BYIRINGIROEmmanuel 刚刚添加了它

标签: javascript reactjs react-native react-hooks


【解决方案1】:

假设服务器返回这个响应:


[
   {
      "id":11,
      "description":"A ka organizata juaj politika dhe procedura të brendshme organizative si pjesë e të cilave parashikohet qartë mënyra e ngritjes së fondeve dhe e manaxhimit të tyre në mënyrë etike?",
      "active":true,
      "sortId":11,
      "locale":"sq",
      "published_at":"2021-06-10T13:56:39.618Z",
      "created_at":"2021-06-10T13:56:36.456Z",
      "updated_at":"2021-10-06T09:18:29.403Z",
      "organization_evaluation":null,
      "questId":11,
      "question_options":[
         {
            "id":44,
            "question":11,
            "description":"Organizata ka politika dhe procedura të brendshme organizative si pjesë e të cilave parashikohet shumë qartë mënyra e ngritjes së fondeve dhe e manaxhimit të tyre në mënyrë etike.",
            "points":4,
            "active":true,
            "icon":null,
            "locale":"sq",
            "published_at":"2021-06-10T14:15:34.685Z",
            "created_at":"2021-06-10T14:15:31.675Z",
            "updated_at":"2021-12-06T09:53:00.315Z",
            "question_option_suggestion":{
               "id":53,
               "question_option":44,
               "description":"Kjo është një praktikë shumë e mirë  për mundësimin e qendrueshmërisë organizative dhe transparencën e llogaridhënien më të gjithë grupet e interesit. Është e rëndësishme që këto procese të mbahen dhe mësimet e nxjerra të ndahen, në mënyrë që organizatat e tjera të mund të ndjekin këtë shembull. ",
               "active":true,
               "locale":"sq",
               "published_at":"2021-11-24T13:20:34.873Z",
               "created_at":"2021-11-22T13:55:53.026Z",
               "updated_at":"2021-12-06T09:53:00.317Z"
            },
            "organization_evaluation":null,
            "questOptionId":44,
            "sort":4
         },
         {
            "id":41,
            "question":11,
            "description":"Organizata nuk ka politika dhe procedura të tilla.",
            "points":1,
            "active":true,
            "icon":null,
            "locale":"sq",
            "published_at":"2021-06-10T14:13:20.937Z",
            "created_at":"2021-06-10T14:13:17.713Z",
            "updated_at":"2021-12-06T09:51:40.886Z",
            "question_option_suggestion":{
               "id":50,
               "question_option":41,
               "description":"Të paturit e praktikave të qarta dhe të formalizuara për mbledhjen e fondeve dhe përdorimin e menaxhimin etik të tyre, është një praktikë e këshillueshme pasi përbën një mjet për rritjen e qendrueshëmrisë së organizatës, uljen e varësisë nga një burim i caktuar fondesh, dhe krijimin e mundësisë për të qenë novator e i suksesshëm. Gjithashtu këto praktika garantojnë njohjen gjerësisht të burimeve nga të gjitha palët e interesuara. Kjo do të sjellë më shumë transparencë dhe të përmirësojë përgjegjshmërinë.",
               "active":true,
               "locale":"sq",
               "published_at":"2021-11-24T13:20:22.267Z",
               "created_at":"2021-11-22T13:54:07.049Z",
               "updated_at":"2021-12-06T09:51:40.889Z"
            },
            "organization_evaluation":null,
            "questOptionId":41,
            "sort":1
         },
         {
            "id":42,
            "question":11,
            "description":"Organizata nuk ka politika dhe procedura të tilla por ndjek disa parime të përgjithshme etike në ngritjen e fondeve dhe manaxhimin e tyre.",
            "points":2,
            "active":true,
            "icon":null,
            "locale":"sq",
            "published_at":"2021-06-10T14:13:57.687Z",
            "created_at":"2021-06-10T14:13:49.677Z",
            "updated_at":"2021-12-06T09:52:12.383Z",
            "question_option_suggestion":{
               "id":51,
               "question_option":42,
               "description":"Të paturit e praktikave të qarta dhe të formalizuara për mbledhjen e fondeve dhe përdorimin e menaxhimin etik të tyre, është një praktikë e këshillueshme pasi përbën një mjet për rritjen e qendrueshëmrisë së organizatës, uljen e varësisë nga një burim i caktuar fondesh, dhe krijimin e mundësisë për të qenë novator e i  suksesshëm. Gjithashtu këto praktika garantojnë njohjen gjerësisht të burimeve nga të gjitha palët e interesuara. Kjo do të sjellë më shumë transparencë dhe të përmirësojë përgjegjshmërinë.",
               "active":true,
               "locale":"sq",
               "published_at":"2021-11-24T13:20:26.501Z",
               "created_at":"2021-11-22T13:54:46.944Z",
               "updated_at":"2021-12-06T09:52:12.385Z"
            },
            "organization_evaluation":null,
            "questOptionId":42,
            "sort":2
         },
         {
            "id":43,
            "question":11,
            "description":"Organizata ka politika dhe procedura të brendshme organizative si pjesë e të cilave ka parashikime të përgjithshme mbi mënyrën e ngritjes së fondeve.",
            "points":3,
            "active":true,
            "icon":null,
            "locale":"sq",
            "published_at":"2021-06-10T14:14:54.428Z",
            "created_at":"2021-06-10T14:14:51.561Z",
            "updated_at":"2021-12-06T09:52:39.514Z",
            "question_option_suggestion":{
               "id":52,
               "question_option":43,
               "description":"Zhvillimi dhe përditësimi i vazhdueshëm i praktikave të tilla, në varësi dhe të dinamikave zhvillimore të organizatës, siguron një përqasje novatore lidhur me garantimin e qendrueshmërisë së organizatës. Këshillohet që këto politika të jenë të mirë detajuara, duke mundësuar jo vetëm një njohje sa më të gjerë nga të gjithë grupet e interesit në kuadër të transparencës dhe llogaridhënies, por dhe zbatim të saktë të tyre në të gjithë nivelet hirarkike.",
               "active":true,
               "locale":"sq",
               "published_at":"2021-11-24T13:20:31.381Z",
               "created_at":"2021-11-22T13:55:27.990Z",
               "updated_at":"2021-12-06T09:52:39.518Z"
            },
            "organization_evaluation":null,
            "questOptionId":43,
            "sort":3
         }
      ],
      "commitments":[
         {
            "id":5,
            "name":"Financim, Ngritje Fondesh dhe Manaxhim i Burimeve",
            "icon":"fa-pencil",
            "primary_color":"#348D73",
            "secondary_color":"#06C088",
            "active":true,
            "published_at":"2021-05-13T08:09:20.077Z",
            "created_at":"2021-05-13T08:09:11.107Z",
            "updated_at":"2021-07-26T10:25:26.204Z",
            "icon_color":"#33D0A1",
            "locale":"sq",
            "commitments_icon":5,
            "commitment_icon":5,
            "color_palette":"light_blue",
            "link":"/financing",
            "sortId":3
         }
      ]
   },
   {
      "id":13,
      "description":"A kryen organizata juaj vlerësime periodike të performancës të punonjësve dhe si? ",
      "active":true,
      "sortId":13,
      "locale":"sq",
      "published_at":"2021-06-10T13:57:37.862Z",
      "created_at":"2021-06-10T13:57:34.723Z",
      "updated_at":"2021-10-06T09:18:57.834Z",
      "organization_evaluation":null,
      "questId":13,
      "question_options":[
         {
            "id":51,
            "question":13,
            "description":"Vlerësimi i performancës së punonjësve bëhet periodikisht me afate të përcaktuara, , përmes një procedure të formalizuar,  por vetëm nga drejtuesi i organizatës.",
            "points":3,
            "active":true,
            "icon":null,
            "locale":"sq",
            "published_at":"2021-06-10T14:20:35.874Z",
            "created_at":"2021-06-10T14:19:48.983Z",
            "updated_at":"2021-12-06T09:55:01.718Z",
            "question_option_suggestion":{
               "id":60,
               "question_option":51,
               "description":"Kjo është një praktikë e mirë organizative e cila mund të përmirësohet më tej me përfshirjen në procedurë jo vetëm të drejtuesit të organizatës por dhe niveleve të tjera të hierarkisë. Kjo përfshirje ofron një këndvështrim më të gjerë të vlerësimit të përformancës në raport dhe me pjesën tjetër të stafit kryesisht supervizues. ",
               "active":true,
               "locale":"sq",
               "published_at":"2021-11-24T13:21:05.079Z",
               "created_at":"2021-11-22T14:02:42.810Z",
               "updated_at":"2021-12-06T09:55:01.724Z"
            },
            "organization_evaluation":null,
            "questOptionId":51,
            "sort":3
         },
         {
            "id":49,
            "question":13,
            "description":"Organizata jonë nuk kryen vlerësime periodike të  performancës së punonjësve.",
            "points":1,
            "active":true,
            "icon":null,
            "locale":"sq",
            "published_at":"2021-06-10T14:19:03.812Z",
            "created_at":"2021-06-10T14:18:56.048Z",
            "updated_at":"2021-12-06T09:54:26.197Z",
            "question_option_suggestion":{
               "id":58,
               "question_option":49,
               "description":"Vlerësimi i performancës së burimeve njerëzore është një aspekt shumë i rëndësishëm për të analizuar ecurinë e organizatës, rregullimet e mundshme që mund të nevojiten, si dhe për të mbledhur komente dhe sugjerime nga stafi dhe vullnetarët e organizatës. Kryerja e një praktike të tillë është shumë e këshillueshme të zhvillohet.",
               "active":true,
               "locale":"sq",
               "published_at":"2021-11-24T13:20:55.365Z",
               "created_at":"2021-11-22T13:59:19.528Z",
               "updated_at":"2021-12-06T09:54:26.199Z"
            },
            "organization_evaluation":null,
            "questOptionId":49,
            "sort":1
         },
         {
            "id":50,
            "question":13,
            "description":"Organizata jonë kryen vlerësime periodike të performancës të punonjësve por jo sipas një planifikimi dhe procedure të formalizuar.",
            "points":2,
            "active":true,
            "icon":null,
            "locale":"sq",
            "published_at":"2021-06-10T14:19:36.859Z",
            "created_at":"2021-06-10T14:19:30.174Z",
            "updated_at":"2021-12-06T09:54:43.753Z",
            "question_option_suggestion":{
               "id":59,
               "question_option":50,
               "description":"Vlerësimi i performancës së burimeve njerëzore është një aspekt shumë i rëndësishëm për të analizuar ecurinë e organizatës, rregullimet e mundshme që mund të nevojiten, si dhe për të mbledhur komente dhe sugjerime nga stafi dhe vullnetarët e organizatës. Kryerja e një praktike të tillë është shumë e këshillueshme të zhvillohet, sipas një procedure të formalizuar në mënyrë periodike.",
               "active":true,
               "locale":"sq",
               "published_at":"2021-11-24T13:20:59.427Z",
               "created_at":"2021-11-22T13:59:50.511Z",
               "updated_at":"2021-12-06T09:54:43.755Z"
            },
            "organization_evaluation":null,
            "questOptionId":50,
            "sort":2
         },
         {
            "id":52,
            "question":13,
            "description":"Vlerësimi i performancës së punonjësve bëhet periodikisht me afate të përcaktuara, , përmes një procedure të formalizuar me përfshirjen dhe vlerësimin e punonjësit dhe të gjitha niveleve hirearkike.",
            "points":4,
            "active":true,
            "icon":null,
            "locale":"sq",
            "published_at":"2021-06-10T14:20:57.838Z",
            "created_at":"2021-06-10T14:20:54.741Z",
            "updated_at":"2021-12-06T09:55:18.506Z",
            "question_option_suggestion":{
               "id":61,
               "question_option":52,
               "description":"Vlerësimi periodik i performancës së punonjësve, nëpërmjet një procedure të formalizuar dhe me përfshirjen e të gjitha niveleve hierarkike, është një praktikë e mirë institucionale. Është e rëndësishme që këto praktika të zhvillohen më tej dhe mësimet e nxjerra gjatë ngritjes së tyre të ndahen, kështu që organizatat e tjera mund të ndjekin këtë shembull.",
               "active":true,
               "locale":"sq",
               "published_at":"2021-11-24T13:21:08.716Z",
               "created_at":"2021-11-22T14:03:21.740Z",
               "updated_at":"2021-12-06T09:55:18.508Z"
            },
            "organization_evaluation":null,
            "questOptionId":52,
            "sort":4
         }
      ],
      "commitments":[
         {
            "id":6,
            "name":"Burime Njerëzore të Mirë Menaxhuara",
            "icon":"fa-pencil",
            "primary_color":"#03BEE7",
            "secondary_color":"#428D9D",
            "active":true,
            "published_at":"2021-05-13T08:10:12.178Z",
            "created_at":"2021-05-13T08:10:08.282Z",
            "updated_at":"2021-07-26T10:25:12.028Z",
            "icon_color":"#027A95",
            "locale":"sq",
            "commitments_icon":6,
            "commitment_icon":6,
            "color_palette":"dark_blue",
            "link":"/managed-human-resources",
            "sortId":7
         }
      ]
   }
]

我们需要根据问题构建新的选定选项数组。


import React, {useState} from 'react'
import {View,FlatList,StyleSheet,Text} from 'react-native'
import {RadioButton} from "react-native-paper"
const  has = require('lodash.has');
import response from './response'

const styles = StyleSheet.create({})



const  Step3 = () => {
  const [questions, setQuestions] = useState(response);

  const [answers,setAnswers] = useState({})
  const [values, setValue] = useState()


 const isOptionSelected = (option)=>{

   const answer = answers[option.question]

  if(answer){
   return   option.id == answer.id
  }

return false
 }

  const OptionList = (groupOption) => {
    return (
      <FlatList
        data={groupOption.options}
        keyExtractor={(result) => result.id.toString()}
        renderItem={({ item, index}) => {

       
          const clickedRadio = () => {
      
         const selectedOption = {[item.question]:{...item}}
            setAnswers({...answers,...selectedOption})


            console.log({answers})


            
          }

          

 const status = isOptionSelected(item)? 'checked' : 'unchecked'
          return (
            <View key={index}>
              <RadioButton status={status}   onPress={clickedRadio} label={item.description} onChange={()=> clickedRadio() } />
            </View>
          );
        }}
      />
    );
  };

  return (
    <View style={styles.container}>
      <Text style={{ fontWeight: "bold", fontSize: 16, color: "#6B24AA" }}>
        Choose an option/Scroll for more questions
      </Text>
      <FlatList
        data={questions}
        keyExtractor={(result) => result.id.toString()}
        renderItem={({ item, index }) => {
          return (
            <View style={styles.groupOptions} key={index}>
              <Text>{item.description}</Text>
              <OptionList options={item?.question_options}></OptionList>
            </View>
          );
        }}
      />
    </View>

  )
}


export default Step3


为了简单起见,我删除了从服务器获取数据的逻辑。

在这里查看工作示例

https://snack.expo.dev/@emmbyiringiro/1376bf

【讨论】:

  • 我测试了答案,但我想要实现的是单选按钮无法在组中进行多选。我希望用户只能从每个问题中选择一个答案选项。对不起,如果我从一开始就不清楚
  • 检查更新的解决方案 - snack.expo.dev/@emmbyiringiro/1376bf
  • 谢谢你,你真棒
  • 很高兴听到这个消息。编码愉快!
【解决方案2】:

您需要为每个选项组选择值,这可以通过使用处于初始值状态的对象来实现:

const [values, setValue] = useState({}) 然后更新 OptionsList 道具以接受另外两个道具,onSelect 和 isSelected。

&lt;OptionList options={item?.question_options} selectedId={value[item?.id]} onSelect={(optionId)=&gt;{ setValue(prevValues=&gt;({...prevValues, [item?.id]:optionId})) }}/&gt;

在 OptionList 组件中,您需要使用来自 props item.id===selectedIdselectedId 为活动选项添加特定样式,并在选择时使用选项 ID 作为参数调用 onSelect 道具。

【讨论】:

猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2018-12-26
  • 1970-01-01
  • 2021-09-30
  • 2021-05-31
  • 2015-10-31
  • 2019-06-17
  • 1970-01-01
相关资源
最近更新 更多