Javascript 如何在React中开发上一个和下一个按钮？

我是一个新的反应，我有一个艰难的时间试图拿出代码，使我的按钮执行我想要的。我希望它们在给定的数组中循环，每次显示不同的信息。我尝试了for循环和forEach方法，并尝试将该项添加到自身中，但似乎没有任何效果。我试图阅读React上的文档，但它没有给我任何帮助。我不知道在React中是否有具体的方法，有人能给我指出正确的方向吗

这是我的密码：

class Members extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userInput: null,
      senators: [],
      represenatives: [],
      bills: [],
      
    }
  }

  handleChange = (e) => {
    this.setState({
      userInput: e.target.value.toUpperCase()
    })
  }

  right = (i) => {
    i.forEach(element => {
      element = element++
      console.log(element)
    });

  }
  left = (i) => {

    console.log(i.id)
  }

  componentDidMount() {
    const key = `xCaHBd8gI5ZJSOUXWFJGOXZBjJtMbvoIcip0kSmS`
    const urls = [`https://api.propublica.org/congress/v1/116/senate/members.json`,
      `https://api.propublica.org/congress/v1/102/house/members.json`,
      `https://api.propublica.org/congress/v1/statements/latest.json`,
      `https://api.propublica.org/congress/v1/bills/search.json`];

    let requests = urls.map(url => fetch(url, {
      type: "GET",
      dataType: 'json',
      headers: {
        'X-API-Key': key
      }
    }))
    Promise.all(requests)
      .then(res => {
        return Promise.all(res.map(res => res.json()));
      }).then(response => {
        this.setState({
          senators: response[0].results[0].members,
          represenatives: response[1].results[0].members,
          bills: response[2].results
        })
      }).catch(err => {
        console.log(err)
      })

  }

  render() {

    const { senators, bills, represenatives, userInput } = this.state;


    const inSenate = senators.filter(
      (senator) => senator.state === userInput
    )

    const inHouse = represenatives.filter(
      (represenative) => represenative.state === userInput
    )

    const draft = bills.find(
      (bill) => bill.name === inSenate.last_name)



    return (

      <div className="congress">
        <div className="users">
          <h2>{this.state.userInput}</h2>
          <input className="userInput" onChange={this.handleChange} />
        </div>

        {inSenate.map((senate, i) => {
          return (
            <div key={senate.id} className="senate">
              <h2 className="senateName">Senate</h2>
              <ul className="bio">
                <h2 >{senate.short_title + " " + senate.first_name + " " + senate.last_name}</h2>
                <li>{senate.title}</li>
                <li>State: <strong>{senate.state}</strong></li>
                <li>Party: <strong>{senate.party}</strong></li>
                <li>DOB: <strong>{senate.date_of_birth}</strong></li>
                <li>Next Election: <strong>{senate.next_election}</strong></li>
                <li>Missed Votes: <strong>{senate.missed_votes}</strong></li>
                <li> Votes With Party Percentage: <strong>{senate.votes_with_party_pct + "%"}</strong></li>
                <li>Votes Against Party Percentage: <strong>{senate.votes_against_party_pct + "%"}</strong></li>
              </ul>
            </div>
          )
        })}

        {inHouse.map((rep, i) => {
          return (
            <div key={rep.id} className="house">
              <h2 className="numbers" >Your state has {inHouse.length} Represenative(s)</h2>
              <h2 >{rep.short_title + " " + rep.first_name + " " + rep.last_name}</h2>
              <ul className="bio">
                <li  >{rep.title}</li>
                <li  >State: <strong>{rep.state}</strong></li>
                <li  >Party: <strong>{rep.party}</strong></li>
                <li  >DOB: <strong>{rep.date_of_birth}</strong></li>
                <li  >Next Election: <strong>{rep.next_election}</strong></li>
                <li  >Missed Votes: <strong>{rep.missed_votes}</strong></li>
                <li  > Votes With Party Percentage: <strong>{rep.votes_with_party_pct + "%"}</strong></li>
                <li  >Votes Against Party Percentage: <strong>{rep.votes_against_party_pct + "%"}</strong></li>
              </ul>
              <button onClick={() => this.left(inHouse)} className="left btn"></button>
              <button onClick={() => this.right(inHouse)} className="right btn"></button>
            </div>
          )
        })}
      </div>

    )
  }
}

类成员扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
userInput:null，
参议员：[]，
代表：[]，
法案：[]，
}
}
handleChange=（e）=>{
这是我的国家({
userInput:e.target.value.toUpperCase（）
})
}
右=（i）=>{
i、 forEach（元素=>{
元素=元素++
console.log（元素）
});
}
左=（i）=>{
控制台日志（i.id）
}
componentDidMount（）{
const key=`xCAHBD8GI5ZJSOUXWFJGOXZBJJTMBVOICIP00KSMS`
常量URL=[`https://api.propublica.org/congress/v1/116/senate/members.json`,
`https://api.propublica.org/congress/v1/102/house/members.json`,
`https://api.propublica.org/congress/v1/statements/latest.json`,
`https://api.propublica.org/congress/v1/bills/search.json`];
让requests=url.map（url=>fetch（url{
键入：“获取”，
数据类型：“json”，
标题：{
“X-API-Key”：键
}
}))
承诺。所有（请求）
。然后（res=>{
返回Promise.all（res.map（res=>res.json（））；
})。然后（响应=>{
这是我的国家({
参议员：答复[0]。结果[0]。各位成员，
代表：响应[1]。结果[0]。成员，
法案：答复[2]。结果
})
}).catch（错误=>{
console.log（错误）
})
}
render（）{
const{senators，bills，representations，userInput}=this.state；
const inSenate=senators.filter(
（senator）=>senator.state===userInput
)
const inHouse=representations.filter(
（representative）=>representative.state==用户输入
)
const draft=bills.find(
（bill）=>bill.name===inSenate.last_name）
返回(
{this.state.userInput}
{inSenate.map（（参议院，i）=>{
返回(
参议院

{senate.short_title+“”+senate.first_name+“”+senate.last_name}
{参议院名称}
州：{senate.State}
政党：{参议院政党}
DOB:{参议院.出生日期}
下次选举：{参议院。下次选举}
错过投票：{参议院.错过投票}
按党派百分比投票：{senate.voces__Party_pct+“%”}
反对党的票数百分比：{senate.vows\u反对党的票数\u pct+“%”

)
})}
{inHouse.map（（rep，i）=>{
返回(
您的州有{inHouse.length}个代表性
{rep.short\u title+“”+rep.first\u name+“”+rep.last\u name}

{rep.title}
州：{rep.State}
党：{rep.Party}
DOB:{出生日期}
下次选举：{rep.Next_Election}
未得票：{rep.Missed_vows}
有党派百分比的选票：{rep.voces\u有党派百分比的票数\u pct+“%”
反对党的选票百分比：{rep.vows\u反对党的pct+“%”

this.left（内部）}className=“left btn”>
this.right（内部）}className=“right btn”>
)
})}
)
}
}

这里有一个解决方案。每次按下按钮时，它使用状态更改信息：

import React, { useEffect, useState, Component } from "react";
import { InputText } from "primereact/inputtext";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      userInput: "CA",
      senators: [],
      represenatives: [],
      bills: [],
      repst: 0, //state for changing representative everytime the button is pressed
    };
  }

  handleChange = (e) => {
    this.setState({
      userInput: e.target.value.toUpperCase(),
    });
  };

  right = (i) => {
    if (this.state.repst + 1 < i.length)
      this.setState({
        repst: this.state.repst + 1,
      });
  };
  left = (i) => {
    if (this.state.repst - 1 > -1)
      this.setState({
        repst: this.state.repst - 1,
      });
  };

  componentDidMount() {
    const key = `xCaHBd8gI5ZJSOUXWFJGOXZBjJtMbvoIcip0kSmS`;
    const urls = [
      `https://api.propublica.org/congress/v1/116/senate/members.json`,
      `https://api.propublica.org/congress/v1/102/house/members.json`,
      `https://api.propublica.org/congress/v1/statements/latest.json`,
      `https://api.propublica.org/congress/v1/bills/search.json`,
    ];

    let requests = urls.map((url) =>
      fetch(url, {
        type: "GET",
        dataType: "json",
        headers: {
          "X-API-Key": key,
        },
      })
    );
    Promise.all(requests)
      .then((res) => {
        return Promise.all(res.map((res) => res.json()));
      })
      .then((response) => {
        this.setState({
          senators: response[0].results[0].members,
          represenatives: response[1].results[0].members,
          bills: response[2].results,
        });
      })
      .catch((err) => {
        console.log(err);
      });
  }

  render() {
    const { senators, bills, represenatives, userInput } = this.state;

    const inSenate = senators.filter((senator) => senator.state === userInput);

    const inHouse = represenatives.filter(
      (represenative) => represenative.state === userInput
    );

    const draft = bills.find((bill) => bill.name === inSenate.last_name);

    return (
      <div className="congress">
        <div className="users">
          <h2>{this.state.userInput}</h2>
          <input className="userInput" onChange={this.handleChange} />
        </div>
        {inSenate.map((senate, i) => {
          return (
            <div key={senate.id} className="senate">
              <h2 className="senateName">Senate</h2>
              <ul className="bio">
                <h2>
                  {senate.short_title +
                    " " +
                    senate.first_name +
                    " " +
                    senate.last_name}
                </h2>
                <li>{senate.title}</li>
                <li>
                  State: <strong>{senate.state}</strong>
                </li>
                <li>
                  Party: <strong>{senate.party}</strong>
                </li>
                <li>
                  DOB: <strong>{senate.date_of_birth}</strong>
                </li>
                <li>
                  Next Election: <strong>{senate.next_election}</strong>
                </li>
                <li>
                  Missed Votes: <strong>{senate.missed_votes}</strong>
                </li>
                <li>
                  {" "}
                  Votes With Party Percentage:{" "}
                  <strong>{senate.votes_with_party_pct + "%"}</strong>
                </li>
                <li>
                  Votes Against Party Percentage:{" "}
                  <strong>{senate.votes_against_party_pct + "%"}</strong>
                </li>
              </ul>
            </div>
          );
        })}
        {inHouse[this.state.repst] ? (
          <div key={inHouse[this.state.repst].id} className="house">
            {console.log(inHouse)}
            <h2 className="numbers">
              Your state has {inHouse.length} Represenative(s)
            </h2>
            <h2>
              {inHouse[this.state.repst].short_title +
                " " +
                inHouse[this.state.repst].first_name +
                " " +
                inHouse[this.state.repst].last_name}
            </h2>
            <ul className="bio">
              <li>{inHouse[this.state.repst].title}</li>
              <li>
                State: <strong>{inHouse[this.state.repst].state}</strong>
              </li>
              <li>
                Party: <strong>{inHouse[this.state.repst].party}</strong>
              </li>
              <li>
                DOB: <strong>{inHouse[this.state.repst].date_of_birth}</strong>
              </li>
              <li>
                Next Election:{" "}
                <strong>{inHouse[this.state.repst].next_election}</strong>
              </li>
              <li>
                Missed Votes:{" "}
                <strong>{inHouse[this.state.repst].missed_votes}</strong>
              </li>
              <li>
                {" "}
                Votes With Party Percentage:{" "}
                <strong>
                  {inHouse[this.state.repst].votes_with_party_pct + "%"}
                </strong>
              </li>
              <li>
                Votes Against Party Percentage:{" "}
                <strong>
                  {inHouse[this.state.repst].votes_against_party_pct + "%"}
                </strong>
              </li>
            </ul>
            <button onClick={() => this.left(inHouse)} className="left btn">
              Next
            </button>
            <button onClick={() => this.right(inHouse)} className="right btn">
              Prev
            </button>
          </div>
        ) : (
          ""
        )}
      </div>
    );
  }
}

import React，{useffect，useState，Component}来自“React”；
从“primereact/InputText”导入{InputText}；
导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
用户输入：“CA”，
参议员：[]，
代表：[]，
法案：[]，
repst:0，//每次按下按钮时更改代表的状态
};
}
handleChange=（e）=>{
这是我的国家({
userInput:e.target.value.toUpperCase（），
});
};
右=（i）=>{
if（this.state.repst+1{
如果（this.state.repst-1>-1）
这是我的国家({
repst:this.state.repst-1，
});
};
componentDidMount（）{
const key=`xCAHBD8GI5ZJSOUXWFJGOXZBJJTMBVOICIP00KSMS`；
常量URL=[
`https://api.propublica.org/congress/v1/116/senate/members.json`,
`https://api.propublica.org/congress/v1/102/house/members.json`,
`https://api.propublica.org/congress/v1/statements/latest.json`,
`https://api.propublica.org/congress/v1/bills/search.json`,
];
让请求=url.map（（url）=>
获取（url{
键入：“获取”，
数据类型：“json”，
标题：{
“X-API-Key”：密钥，
},
})
);
承诺。所有（请求）
。然后（（res）=>{
返回Promise.all（res.map（（res）=>res.json（））；
})
。然后（（响应）=>{
这是我的国家({
参议员：答复[0]。结果[0]。各位成员，