Question

我想显示在DropdownModal（https://github.com/sohobloo/react-native-modal-dropdown）中从API提取的数据的列表。数据是用户地址，包括名称，州，国家以及与地址相关的所有信息。但是它不会显示在下拉列表中，而是显示正在加载图标，这意味着该图标为null或undefined。但是我确实从API中提取了数据，我通过对错误和结果发出警报来验证（是的，两者都提供相同的数据，即地址）。下面是我的代码。

const {getAddresses} = auth;
var {width, height} = Dimensions.get('window');

class RegisterEventOne extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      event_id: '',
      tshirt_size: '',
      size: '',
      address: '',
      addressx: '',
     };
    this.onResult = this.onResult.bind(this);
    this.onError = this.onError.bind(this);

  }

  handleWithDropdownCategory = id => {
    this.setState({event_id: id});
  };

  handleWithDropdownSize = size => {
    this.setState({tshirt_size: size});
  };

  TShirtSize = size => {
    this.setState({size: size});
  };

  setAddress = address => {
    this.setState({addressx: address})
  }

  componentDidMount() {
    this.props.getAddresses(this.props.event.id, this.onResult, this.onError);

  }

  onError(error) {
    alert(JSON.stringify(error));

  }

  onResult(result) {
    this.setState({
      address: result,
    });
  }

  render() {
    return (
      <React.Fragment>
        <StatusBar backgroundColor="black" barStyle="light-content" />
        <SafeAreaView style={styles.container}>
          <ScrollView
            contentInsetAdjustmentBehavior="automatic"
            style={styles.scrollView}>
            <View>
              <Text style={styles.eventname}>{this.props.event.name}</Text>
              <ModalDropdown
                dropdownStyle={styles.dropdown}
                dropdownTextStyle={{fontSize:15}}
                style={styles.dropdown}
                onSelect={(index, value) => {
                  this.handleWithDropdownCategory(value);
                }}

                options={this.props.event.categories.map(function(event) {
                  return event.name;
                })}>
                <View style={styles.dropdowncontainer}>
                  <Text>{this.state.event_id === '' ? 'Select Category' : this.state.event_id}</Text>
                  <Ionicons name="ios-arrow-down" size={20} color="black" />
                </View>
              </ModalDropdown>
              <ModalDropdown
                dropdownStyle={styles.dropdown}
                dropdownTextStyle={{fontSize:15}}
                style={styles.dropdown}
                onSelect={(index, value) => {
                  this.handleWithDropdownSize(value);
                  this.TShirtSize(index+1);
                }}
                options={this.props.event.tshirts.map(function(event, index) {
                  return event.size;
                })}
                >
                <View style={styles.dropdowncontainer}>
              <Text>{this.state.tshirt_size === '' ? 'Select Tshirt Size' : this.state.tshirt_size}</Text>
                  <Ionicons name="ios-arrow-down" size={20} color="black" />
                </View>
              </ModalDropdown>
              <ModalDropdown
                dropdownStyle={styles.dropdown}
                style={styles.dropdown}
                dropdownTextStyle={{fontSize:15}}
                onSelect={(index, value) => {
                this.setAddress(value);
                }}

                options={this.state.address !== '' ? this.state.address.map(function(address, index)  {
                  return address.id;
                }):null}

                >

                <View style={styles.dropdowncontainer}>
              <Text>{this.state.addressx === '' ? 'Select Address' : this.state.addressx}</Text>
                  <Ionicons name="ios-arrow-down" size={20} color="black" />
                </View>
              </ModalDropdown>

              {/* <Text style={styles.header}>Compete with ohters (Optional)</Text>
              <TextInput
                style={styles.header}
                onChangeText={text => onChangeText(text)}
                placeholder="Set Date & Time (Time zone)"
              /> */}
              {/* <View style={styles.checkboxcontainer}>
                <BouncyCheckbox
                  textColor="#000"
                  fillColor="orange"
                  fontFamily="JosefinSans-Regular"
                  text="Individual Competition"
                />
                <BouncyCheckbox
                  textColor="#000"
                  fillColor="orange"
                  fontFamily="JosefinSans-Regular"
                  text="Team Competition"
                />
                <TextInput
                  style={styles.header}
                  onChangeText={text => onChangeText(text)}
                  placeholder="Team member limit"
                />
                <TextInput
                  style={styles.header}
                  onChangeText={text => onChangeText(text)}
                  placeholder="Username / Email"
                />
                <TextInput
                  style={styles.header}
                  onChangeText={text => onChangeText(text)}
                  placeholder="Username / Email"
                />
                <TextInput
                  style={styles.header}
                  onChangeText={text => onChangeText(text)}
                  placeholder="Username / Email"
                />
              </View> */}
            </View>
          </ScrollView>
          <View style={styles.processIndicator}>
            <TouchableOpacity disabled>
              <Text style={styles.textProcessPrimary}>Previous</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={()=>Actions.RegisterEventThree({event_id: this.props.event.categories[0].event_id, category_id: this.state.event_id, size: this.state.size, address: this.state.addressx})}>
              <Text style={styles.textProcessPrimary}>Next</Text>
            </TouchableOpacity>

          </View>
        </SafeAreaView>
      </React.Fragment>
    );
  }
}

export default connect(
  null,
  {getAddresses},
)(RegisterEventOne);

API：

    export function getAddresses(data, callback) {
  AsyncStorage.getItem('token').then(value => {
    const token = JSON.parse(value);
    fetch('https:apiurl.com', {
      method: 'GET',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        Authorization: 'bearer' + token.access_token,
      },

    })
    .then(response => response.json())
    .then(response => callback(response.data))
    .catch(error => callback(false, null, error.json()));

Answer 1

仅当data（options）为undefined或null时，加载指示符才会显示。这意味着您根本没有数据，或者数据结构不正确。

您说过，还会触发错误警报，这并不是一件好事。我不知道为什么错误会向您显示一些数据。（错误数据除外）。

选项应以以下格式传递：['data1', 'data2']。

此外，您从redux => this.props.event.categories中获取数据，而不是从state中获取数据。如果要使用redux，则mapStateToProps fnc中会缺少某种connect。

此代码中有很多错误的模式。查看一些如何使用redux的示例，还可以查看react-native-modal-dropdown github repo中的示例（如果您想使用它）。

Answer 2

现在解决了。我只是在response.data后面添加了true，null。它看起来像这样： .then（response =>回调（response.data，true，null）

不显示从api获取的数据（React Native）

2 个答案: