React-Native 如何將我的 json 數據返回到我的道具？

Question

我有一個組件，該組件應該將 json url 發送到我的 function。 然后 function 將獲取它並將其作為道具發回，這樣我就可以在道具中看到數據。 但即使我認為數據是真的，當我返回它時它並不順利它總是給我那個錯誤：

{"dataSource": {"_U": 0, "_V": 0, "_W": null, "_X": null}

我的組件：

const DropdownComponent =  props => {
  console.log('props -->',props)
  return (
    <Picker
      dataSource={props.dataSource}
      mode="dropdown"
      dropdownIconColor="white"
      style={styles.touchstyle}
      onValueChange={props.onChange()}>  
      {/* {props.dataSource &&
        props.dataSource.map(data => {
          return (
            <Picker.Item
              color="black"
              key={data.id}
              label={data.name}
              value={data.id}
            />
          );
        })} */}
    </Picker>
  );
};

我在應用程序中的組件：

<DropdownComponent
          key="1"    
          dataSource={getData(   // I need send that url and type and when its fetcher fetch url it should return back data to dataSource
            'https://api.npoint.io/995de746afde6410e3bd',
            'city',
          )}
          onChange={onChange}
        />   

我的提取器：

const  getData =  (apiUrl, type) => {

     
  

      return apiService.getPost(apiUrl,type).then(cz=>{
        console.log('cz--->',cz)  // cz is show me my datas when i check console
        
       return cz;
      

       })

我的 Api 服務：

apiService.getPost = async function (url, params) {

 
  

  const x = fetch(url).then(res => res.json())
 
  return x;

日志結果： https://ibb.co/k5VdN8z （我也不知道為什么道具比我的 function 更早顯示）

謝謝您的回復！

Answer 1

那是因為你在dataSource中傳遞了一個Promise ，你應該在下拉列表中聲明一個 state ，當dataSource源解析時應該更新 state ：

const DropdownComponent =  props => {
  const [data, setData] = useState([]);

  useEffect(() => {
    props.dataSource.then(setData);
  }, [props.dataSource]);

  return (
    <Picker
      dataSource={props.dataSource}
      mode="dropdown"
      dropdownIconColor="white"
      style={styles.touchstyle}
      onValueChange={props.onChange()}>  
      {data.map(data => {
          return (
            <Picker.Item
              color="black"
              key={data.id}
              label={data.name}
              value={data.id}
            />
          );
        })}
    </Picker>
  );
};