Question

我本机有两个选择器，可以从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>

Answer 1

很难说出没有完整的内容，但是我想如果您有条件地基于此渲染，那么您也会遇到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>
      </>
    );
  }
}

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

1 个答案: