React-Native 如何将我的 json 数据返回到我的道具？

Question

I have a component and that component should send a json url to my function. Then that function will fetch it and send back it as props so i can see data in props. But even i take data true, when i return it its not going well its always give me that error:

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

My component:

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>
  );
};

My component in app:

<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}
        />   

My Fetcher:

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;
      

       })

My Api Service:

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

 
  

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

Result on log: https://ibb.co/k5VdN8z ( Also i dont know why props shows before than my function too )

Thanks for reply!

Answer 1

That's because you're passing a Promise in dataSource , you should declare a state in the dropdownlist, that state should be updated when the dataSource resolves:

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>
  );
};