(React Native)按下按钮时在JSON文件中检索下一个值

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了(React Native)按下按钮时在JSON文件中检索下一个值相关的知识,希望对你有一定的参考价值。

假设我有一个结构为的本地JSON文件(./movies.json)

{ "movies": [ 
    { "title" : "Terminator", "year" :  "1984", "genre" : "Action" },
    { "title" : "Jumanji", "year" : "2017", "genre" : "Adventure"},
    { "title" : "Incredibles 2", "year" : "2017", "genre" : "Animation"}]
}

每当点击一个按钮时,我想按顺序输出一个带终止符的文本字段 - > Jumanji - > Incredibles 2。我还希望能够在单击按钮时按顺序访问“标题”,“电影”,“流派”(在单独的文本字段中)中的所有三个。

这是我到目前为止,只是按顺序获得电影的标题。它不起作用,因为我认为我没有正确地从JSON文件中提取。

import jsonData from "./movies.json";

export default class Movies extends React.Component {
  constructor(props) {
  super(props);
      this.state = {
         results:{
         titles: [],
         years: [], 
         genres: []
       }
     }
  };
}
componentDidMount = () => {
  // const data = json.stringify(jsonData)  I think this line is not correct 
  this.setState({ data })
}
render () { 
  titles_list = this.state.results.titles.map((item) => {
  return (
      <View key={item.title}>
        <Text>
          {item.title}
        </Text>
      </View>
    );
 });
return (
  <View>
    {titles_list}
  </View>
);
}
}

我不确定如何实现按钮,以便在按下时显示下一个标题/年份/类型。帮助将不胜感激。谢谢!

答案

将数组的索引存储在状态变量中。首先,我假设你把那个json传递给了state.movies

所以初始化如下:

   this.state = {
     movies: [], // where the movies are
     displayIndex: 0 // This will be the index that you show
   }

当您按下按钮时,调用一个将调用以下任一功能的功能:

moveForward(){
  this.setState({displayIndex: this.state.displayIndex++})
}
moveBack(){
  this.setState({displayIndex: this.state.displayIndex--})
}

然后,当您在渲染函数下显示字段时,抓取您需要的对象,如下所示:

render(){
   const movieData = this.state.movies[this.state.displayIndex];
   ....//Do the display logic here

以上是关于(React Native)按下按钮时在JSON文件中检索下一个值的主要内容,如果未能解决你的问题,请参考以下文章

在 React-native 中按下按钮后双触发

React native mqtt - 按下按钮时发布

react-native-maps:如何在按钮按下时跟随用户位置

在键盘感知滚动视图中的 textInput 后​​按下 React-Native 按钮

如何在 React Native 中按下按钮时更改文本值?

仅在用户按下 React Native 中的按钮后如何获取位置