我想将JSON文件中的数据用作单选按钮的标签（本机反应）

Question

我有一个读取JSON文件的应用。 在一个选项卡中，我将其显示为列表，在另一个选项卡中，我希望它显示从文件中选择的项目，作为我在此处找到的单选按钮的标签：

https://www.npmjs.com/package/react-native-radio-buttons-group

这是我的应用程序选项卡上的代码，该代码从JSON文件中提取药物名称：

import React, { Component } from "react";
import {
    View,
    Text,
    StyleSheet,
    TouchableHighlight,
    FlatList
} from "react-native";
import { Icon } from 'native-base'
import RadioGroup from 'react-native-radio-buttons-group';

//import MultipleChoice from 'react-native-multiple-choice'


class LikesTab extends Component {

  _onSelect = ( item ) => {
       console.log(item);
     };

     onPress = data => this.setState({ data });

  constructor(props){
    super(props);

    this.state = {
      data:[]
    }
  }

//SETTING THE STATE MAKING AN EMPTY ARRAY WHICH WE FIL
//  state = {
  //  data: []
  //};

  componentWillMount() {
    this.fetchData();
  }

//Getting the data
fetchData = async () => {
  const response = await fetch("https://api.myjson.com/bins/s5iii");
  const json = await response.json();
  this.setState({ data: json.results });
};

  //var customData = require('./customData.json');


//Setting what is shown
render() {


  return (
    <View style={{ marginVertical: 10, backgroundColor: "#E7E7E7" }} >
      <FlatList
        data={this.state.data}
        keyExtractor={(x, i) => i}
        renderItem={({ item }) =>
          <Text>
            {`${item.name.first} ${item.name.last}`}
          </Text>}

      />




    </View>
  );
}
}

export default LikesTab;



const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    }
});

这是单选按钮的标签

    import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';

import RadioGroup from 'react-native-radio-buttons-group';

export default class AddMediaTab extends Component {

  componentWillMount() {
    this.fetchData();
  }

//Getting the data
fetchData = async () => {
  const response = await fetch("https://api.myjson.com/bins/s5iii");
  const json = await response.json();
  this.setState({ data: json.results });
};

    state = {
        data: [
            {
                label:' ' ,
            }

        ]
    };



    // update state
    onPress = data => this.setState({ data });

    render() {
        let selectedButton = this.state.data.find(e => e.selected == true);
        selectedButton = selectedButton ? selectedButton.value : this.state.data[0].label;
        return (
            <View style={styles.container}>
                <Text style={styles.valueText}>
                    Value = {selectedButton}
                </Text>
                <RadioGroup radioButtons={this.state.data} onPress={this.onPress}
                 />

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    valueText: {
        fontSize: 18,
        marginBottom: 50,
    },
});

Answer 1

您的selectedButton变量是什么？ 我认为Value = {selectedButton}是问题。 如果selectedButton求值为字符串，则可以，但是在您的情况下看起来像是一个对象。 Array.find（）返回满足条件的第一个元素，如果不满足该条件，则返回undefined。 如果在此时间内未定义该变量，则它将等待您的api调用返回可能也会引起问题的内容。