如何在React Native中使用两个选择器？

Posted 2023-02-24

我有两个选择器在本地处理从API获取数据的反应，但是当我从另一个获取数据API添加另一个选择器时，EXPO APP崩溃。我试图更改dataSource的名称，但是仍然出现错误。这是我的代码，谢谢！。

  componentDidMount() 

    return fetch('http://address/api/AreaUnidades/obtenerAreas')
      .then((response) => response.json())
      .then((responseJson) => 
        this.setState(
          isLoading: false,
          dataSource: responseJson
        , function() 
          // In this block you can do something with new state.
        );
      )


      .catch((error) => 
        console.error(error);
      ); 

  


//SELECT CARS
  componentDidMount2() 

    return fetch('http://address/api/InventarioMarchamos/obtenerVehiculos/')
      .then((response) => response.json())
      .then((responseJson1) => 
        this.setState(
          isLoading: false,
          dataSource2: responseJson1
        , function() 
          // In this block you can do something with new state.
        );
      )
      .catch((error) => 
        console.error(error);
      ); 
  

选择器代码：

<Picker
  selectedValue=this.state.PickerValueHolder
   onValueChange=(itemValue, itemIndex) => this.setState(PickerValueHolder: itemValue) >
     this.state.dataSource.map((item, key)=>(
     <Picker.Item label=item.area value=item.id_area key=key STF = this.setFirstValue("1") />)
     )
</Picker>


<Picker
  selectedValue=this.state.PickerVehiculos
   onValueChange=(itemValue, itemIndex) => this.setState(PickerVehiculos: itemValue) >
     this.state.dataSource.map((item, key)=>(
     <Picker.Item label=item.Placa value=item.IdUnidad key=key  />)
     )
</Picker>

答案

[很难在没有完整组件的情况下告诉您，但是我想如果您有条件地基于此渲染，那么您也会遇到isLoading状态的问题。

下面的代码将两个fetch调用都放入componentDidMount中（无需在那里返回fetch的值），并为第二个数据源添加了一个附加的loading状态。最后，将第二个选择器连接到dataSource2。

class TwoPickers extends React.Component 
  constructor(props) 
    super(props);
    this.state = 
      dataSource: [],
      dataSource2: [],
      isLoading: true,
      isLoading2: true,
    ;
  

  componentDidMount() 
    fetch('http://address/api/AreaUnidades/obtenerAreas')
      .then(response => response.json())
      .then(responseJson => 
        this.setState(
          
            isLoading: false,
            dataSource: responseJson,
          ,
          function() 
            // In this block you can do something with new state.
          
        );
      )

      .catch(error => 
        console.error(error);
      );
    fetch('http://address/api/InventarioMarchamos/obtenerVehiculos/')
      .then(response => response.json())
      .then(responseJson1 => 
        this.setState(
          
            isLoading2: false,
            dataSource2: responseJson1,
          ,
          function() 
            // In this block you can do something with new state.
          
        );
      )
      .catch(error => 
        console.error(error);
      );
  
  render() 
    const isLoading, isLoading2 = this.state;
    if (isLoading || isLoading2) 
      // your loading component
    
    return (
      <>
        <Picker
          selectedValue=this.state.PickerValueHolder
           onValueChange=(itemValue, itemIndex) => this.setState(PickerValueHolder: itemValue) >
             this.state.dataSource.map((item, key)=>(
             <Picker.Item label=item.area value=item.id_area key=key STF = this.setFirstValue("1") />)
             )
        </Picker>


        <Picker
          selectedValue=this.state.PickerVehiculos
           onValueChange=(itemValue, itemIndex) => this.setState(PickerVehiculos: itemValue) >
             this.state.dataSource.map((item, key)=>(
             <Picker.Item label=item.Placa value=item.IdUnidad key=key  />)
             )
        </Picker>
      </>
    );