如何将响应传递给react本机RNPickerSelect功能组件

Question

这是我想要做的一个非常简单的动作，我只是想用我从http请求中收到的数据填充一个RNPickerSelect，问题是我正在学习如何使用react-native，我有点困惑。这是我的代码：

import React,{useState} from 'react';
import RNPickerSelect from 'react-native-picker-select';
import { View, Text, Button } from 'react-native';

    const getData = () => {
      const xhr = new XMLHttpRequest();
      xhr.open('GET','http://3.86.214.41/api/v1/web/activities');
      xhr.responseType = 'json'
      xhr.onload = () => {
          const data = xhr.response
          for (var i = 0; i < data.length; i++) {
            alert(data[i].id + data[i].name);
          }
      }
      xhr.send();
    }
    
    const Actividad = () => {
      const [activityId,setActivityId] = useState('');
      return (
        <View>
          <Text>Selecciona Actividad</Text>
          <RNPickerSelect
            onValueChange={activityId => setActivityId(activityId)}
            items={
               [ {label: 'actividad', value: '1'}]
            }
          />
          <Button onPress={getData} title="Get Activities" />
        </View>
      );
    };
    
    export default Actividad;

您可以看到我迭代的响应，只是为了确保数据在那里，所以我想使用该数据创建项目列表。

从getData函数到RNPickerSelect组件内部的项目道具，希望我足够清楚，所以如果有人能帮助我，我会投票给你的答案，非常感谢你。很抱歉，如果这是一个无用的问题，但我找不到一个清晰和容易理解的答案，谢谢。

Answer 1

您将需要向组件添加额外的状态，

  const [items,setItems] = useState([ {label: 'actividad', value: '1'}]);

然后将此状态传递给您的RNPickerSelect：

 <RNPickerSelect
    onValueChange={activityId => setActivityId(activityId)}
    items={items}
 />

剩下的就是改变这个项目的状态。我们可以创建另一个函数，让它称为onEndGetData end，它将接收您的端点数据并更新项状态

const onEndGetData = (payload) => {
    setItems(payload.map((item) => ({ label: item.name, value: item.id })));
};

现在只需将此函数传递给getData函数，这样您就可以根据

<Button onPress={() => getData(onEndGetData)} title="Get Activities" />

因此，一旦得到响应，就可以在getData中使用它：

const getData = (onEndGetData) => {
    ...
    xhr.onload = () => {
              onEndGetData(xhr.response);
          }