从存储在github中的json中反应本机加载数据

Question

我有一个json文件。 Link here

＆＃13;

＆＃13;

{"Cat": [
	{"key": "a",
	 "title": "Bangladesh",
	 "image": "https://raw.githubusercontent.com/mudassir21/server/master/img/bangladesh.jpg",
	 "news": [
	  {"key": "a", "title": "ICC T20", "details": "rgybfdf ehf euhfiue eshfu9he eh9f9uhe ehgf9gy rgybfdf enfijn efnhiueh fhiuerhngf reuigfr rhgiuhs huiwghf 3ejfow fnhbviuo rgybfdf ehf euhfiue eshfu9he eh9 gefgey8 egf8 9ewgf89e 9ewghf8g 9ewhfd8i 9ewhdf8 hwed7uhyeu ewhdfyuh"},
	  {"key": "b", "title": "DITF 2018", "details": "rgybfdf enfijn efnhiueh fhiuerhngf reuigfr rhgiuhs huiwghf 3ejfow fnhbviuo rgybfdf ehf euhfiue eshfu9he eh9f9uhe ehgf9gy gefgey8 egf8 9ewgf89e 9ewghf8g 9ewhfd8i fhgiuh hguhsi ruhgiuherih shif"},
	  {"key": "a", "title": "ICC T20", "details": "rgybfdf ehf euhfiue eshfu9he eh9f9uhe ehgf9gy rgybfdf enfijn efnhiueh fhiuerhngf reuigfr rhgiuhs huiwghf 3ejfow fnhbviuo rgybfdf ehf euhfiue eshfu9he eh9 gefgey8 egf8 9ewgf89e 9ewghf8g 9ewhfd8i 9ewhdf8 hwed7uhyeu ewhdfyuh"},
	  {"key": "b", "title": "DITF 2018", "details": "rgybfdf enfijn efnhiueh fhiuerhngf reuigfr rhgiuhs huiwghf 3ejfow fnhbviuo rgybfdf ehf euhfiue eshfu9he eh9f9uhe ehgf9gy gefgey8 egf8 9ewgf89e 9ewghf8g 9ewhfd8i fhgiuh hguhsi ruhgiuherih shif"},
	  {"key": "a", "title": "ICC T20", "details": "rgybfdf ehf euhfiue eshfu9he eh9f9uhe ehgf9gy rgybfdf enfijn efnhiueh fhiuerhngf reuigfr rhgiuhs huiwghf 3ejfow fnhbviuo rgybfdf ehf euhfiue eshfu9he eh9 gefgey8 egf8 9ewgf89e 9ewghf8g 9ewhfd8i 9ewhdf8 hwed7uhyeu ewhdfyuh"},
	  {"key": "b", "title": "DITF 2018", "details": "rgybfdf enfijn efnhiueh fhiuerhngf reuigfr rhgiuhs huiwghf 3ejfow fnhbviuo rgybfdf ehf euhfiue eshfu9he eh9f9uhe ehgf9gy gefgey8 egf8 9ewgf89e 9ewghf8g 9ewhfd8i fhgiuh hguhsi ruhgiuherih shif"},
	  {"key": "a", "title": "ICC T20", "details": "rgybfdf ehf euhfiue eshfu9he eh9f9uhe ehgf9gy rgybfdf enfijn efnhiueh fhiuerhngf reuigfr rhgiuhs huiwghf 3ejfow fnhbviuo rgybfdf ehf euhfiue eshfu9he eh9 gefgey8 egf8 9ewgf89e 9ewghf8g 9ewhfd8i 9ewhdf8 hwed7uhyeu ewhdfyuh"},
	  {"key": "b", "title": "DITF 2018", "details": "rgybfdf enfijn efnhiueh fhiuerhngf reuigfr rhgiuhs huiwghf 3ejfow fnhbviuo rgybfdf ehf euhfiue eshfu9he eh9f9uhe ehgf9gy gefgey8 egf8 9ewgf89e 9ewghf8g 9ewhfd8i fhgiuh hguhsi ruhgiuherih shif"},
	  {"key": "a", "title": "ICC T20", "details": "rgybfdf ehf euhfiue eshfu9he eh9f9uhe ehgf9gy rgybfdf enfijn efnhiueh fhiuerhngf reuigfr rhgiuhs huiwghf 3ejfow fnhbviuo rgybfdf ehf euhfiue eshfu9he eh9 gefgey8 egf8 9ewgf89e 9ewghf8g 9ewhfd8i 9ewhdf8 hwed7uhyeu ewhdfyuh"},
	  {"key": "b", "title": "DITF 2018", "details": "rgybfdf enfijn efnhiueh fhiuerhngf reuigfr rhgiuhs huiwghf 3ejfow fnhbviuo rgybfdf ehf euhfiue eshfu9he eh9f9uhe ehgf9gy gefgey8 egf8 9ewgf89e 9ewghf8g 9ewhfd8i fhgiuh hguhsi ruhgiuherih shif"}
         ]
	},
	{"key": "b",
	 "title": "Sports",
	 "image": "https://raw.githubusercontent.com/mudassir21/server/master/img/sports.jpg",
	 "news": [
	  {"key": "a", "title": "BD vs IND", "details": "rgybfdf ehf euhfiue eshfu9he eh9f9uhe ehgf9gy gefgey8 egf8 rgybfdf enfijn efnhiueh fnhiueh fhiuerhngf reuigfr fhiuerhngf 9ewgf89e 9ewghf8g 9ewhfd8i 9ewhdf8 hwed7uhyeu ewhdfyuh"},
	  {"key": "b", "title": "ICC Cricket World Cup", "details": "rgybfdf enfijn efnhiueh fhiuerhngf reuigfr rhgiuhs rgybfdf ehf euhfiue eshfu9he eh9f9uhe ehgf9gy gefgey8 egf8 9ewgf89e 9ewghf8g 9ewhfd8i 9ewhdf huiwghf 3ejfow fnhbviuo fhgiuh hguhsi ruhgiuherih shif"},
	  {"key": "a", "title": "ICC T20", "details": "rgybfdf ehf euhfiue eshfu9he eh9f9uhe ehgf9gy rgybfdf enfijn efnhiueh fhiuerhngf reuigfr rhgiuhs huiwghf 3ejfow fnhbviuo rgybfdf ehf euhfiue eshfu9he eh9 gefgey8 egf8 9ewgf89e 9ewghf8g 9ewhfd8i 9ewhdf8 hwed7uhyeu ewhdfyuh"},
	  {"key": "b", "title": "DITF 2018", "details": "rgybfdf enfijn efnhiueh fhiuerhngf reuigfr rhgiuhs huiwghf 3ejfow fnhbviuo rgybfdf ehf euhfiue eshfu9he eh9f9uhe ehgf9gy gefgey8 egf8 9ewgf89e 9ewghf8g 9ewhfd8i fhgiuh hguhsi ruhgiuherih shif"},
	  {"key": "a", "title": "ICC T20", "details": "rgybfdf ehf euhfiue eshfu9he eh9f9uhe ehgf9gy rgybfdf enfijn efnhiueh fhiuerhngf reuigfr rhgiuhs huiwghf 3ejfow fnhbviuo rgybfdf ehf euhfiue eshfu9he eh9 gefgey8 egf8 9ewgf89e 9ewghf8g 9ewhfd8i 9ewhdf8 hwed7uhyeu ewhdfyuh"},
	  {"key": "b", "title": "DITF 2018", "details": "rgybfdf enfijn efnhiueh fhiuerhngf reuigfr rhgiuhs huiwghf 3ejfow fnhbviuo rgybfdf ehf euhfiue eshfu9he eh9f9uhe ehgf9gy gefgey8 egf8 9ewgf89e 9ewghf8g 9ewhfd8i fhgiuh hguhsi ruhgiuherih shif"},
	  {"key": "a", "title": "ICC T20", "details": "rgybfdf ehf euhfiue eshfu9he eh9f9uhe ehgf9gy rgybfdf enfijn efnhiueh fhiuerhngf reuigfr rhgiuhs huiwghf 3ejfow fnhbviuo rgybfdf ehf euhfiue eshfu9he eh9 gefgey8 egf8 9ewgf89e 9ewghf8g 9ewhfd8i 9ewhdf8 hwed7uhyeu ewhdfyuh"},
	  {"key": "b", "title": "DITF 2018", "details": "rgybfdf enfijn efnhiueh fhiuerhngf reuigfr rhgiuhs huiwghf 3ejfow fnhbviuo rgybfdf ehf euhfiue eshfu9he eh9f9uhe ehgf9gy gefgey8 egf8 9ewgf89e 9ewghf8g 9ewhfd8i fhgiuh hguhsi ruhgiuherih shif"},
	  {"key": "a", "title": "ICC T20", "details": "rgybfdf ehf euhfiue eshfu9he eh9f9uhe ehgf9gy rgybfdf enfijn efnhiueh fhiuerhngf reuigfr rhgiuhs huiwghf 3ejfow fnhbviuo rgybfdf ehf euhfiue eshfu9he eh9 gefgey8 egf8 9ewgf89e 9ewghf8g 9ewhfd8i 9ewhdf8 hwed7uhyeu ewhdfyuh"},
	  {"key": "b", "title": "DITF 2018", "details": "rgybfdf enfijn efnhiueh fhiuerhngf reuigfr rhgiuhs huiwghf 3ejfow fnhbviuo rgybfdf ehf euhfiue eshfu9he eh9f9uhe ehgf9gy gefgey8 egf8 9ewgf89e 9ewghf8g 9ewhfd8i fhgiuh hguhsi ruhgiuherih shif"}
	 ]
	},
	{"key": "c", "title": "Politics", "image": "https://raw.githubusercontent.com/mudassir21/server/master/img/politics.jpg"},
	{"key": "d", "title": "Entertainment", "image": "https://raw.githubusercontent.com/mudassir21/server/master/img/entertainment.png"},
	{"key": "e", "title": "Economics", "image": "https://raw.githubusercontent.com/mudassir21/server/master/img/economics.jpg"},
	{"key": "f", "title": "Technology", "image": "https://raw.githubusercontent.com/mudassir21/server/master/img/technology.jpg"},
	{"key": "g", "title": "Others", "image": "https://raw.githubusercontent.com/mudassir21/server/master/img/m.jpg"}
]
}

＆＃13;

＆＃13;

＆＃13;

现在我只想加载一个用户选择的新闻数组。 这是我加载数据的代码。

＆＃13;

＆＃13;

componentDidMount() {
	    return fetch('https://raw.githubusercontent.com/mudassir21/server/master/newsCategory.json')
	      .then((response) => response.json())
	      .then((responseJson) => {
	        let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
	        this.setState({
	          isLoading: false,
	          dataSource: ds.cloneWithRows(responseJson.Cat),
	          dataNews: ds.cloneWithRows(responseJson.Cat[this.state.rowNo].news)
              }, function() {
	          // do something with new state
	        });
	      })
	      .catch((error) => {
	        console.error(error);
	      });
	  }

＆＃13;

＆＃13;

＆＃13;

这里是视图数据的代码

＆＃13;

＆＃13;

<ListView
		          dataSource={this.state.dataNews}
		          //dataSource={news}
		          renderRow={(rowData) => 
		          	<TouchableOpacity
					  	style={styles.option}
					  	onPress = { ()=> this.setState({ newsTitle: rowData.title, newsDetails: rowData.details })}
					  >
		          	<Text style={styles.title}>{rowData.title}</Text>
		          	<Text>{rowData.details}</Text>
		          	</TouchableOpacity>
		          }
		        />

＆＃13;

＆＃13;

＆＃13;

我在构造函数中设置了rowNo 0的状态值。但我想通过单击按钮更改此状态变量值，然后想要使用新的rowNo值设置dataNews值。每次单击按钮都会设置rowNo的新值，因此每次都需要在dataNews中设置新数据。 我怎么能这样做？

Answer 1

使用另一个函数加载数据并在每次点击时调用它。喜欢这个

newsLoad(num) {
	  	this.setState({rowNo: num});
	    return fetch('https://raw.githubusercontent.com/mudassir21/server/master/newsCategory.json')
	      .then((response) => response.json())
	      .then((responseJson) => {
	        let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
	        this.setState({
	          isLoading: false,
	          dataNews: ds.cloneWithRows(responseJson.Cat[this.state.rowNo].news)
	        }, function() {
	          // do something with new state
	        });
	      })
	      .catch((error) => {
	        console.error(error);
	      });
	  }