我想將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調用返回可能也會引起問題的內容。