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

Question

假设我有一个本地json文件（./movies.json），构成为

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

每当单击按钮时，我都想输出，例如，一个带有的文本字段终结者 -> jumanji-> Incessibles 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>
);
}
}

我不确定如何实现按钮，以便按下按钮，显示下一个标题/年/类型。帮助您将不胜感激。谢谢！

Answer 1

将数组的索引存储在状态变量中。首先，我假设您将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