如何在 React 中更改单个按钮的状态

Question

我有一个关于基于 React 中的条件进行渲染的问题。我在这里有这个按钮组件，它根据“等级”的 API 列表呈现按钮列表。当您按下按钮时，它会将用户排名更新为新的。问题是它们不能通过相同的过程进行降级，因此每当用户处于某个排名时，他们无法选择低于当前排名值的任何按钮。看起来是这样的：

interface BProps {
  data: Array<any>;
  buttonAction: any; //action for parent component
  rank: string;
  rankId: number;

}

interface BState {
  data: Array<any>;
  rankId: integer;
  rank: string;
  
}


export default class rankButtons extends React.Component<BProps, BState> {
  router: any;
  
  constructor(props: BProps) {
      super(props)
      this.state = {
        data: [],
        rankId: this.props.rankId,
        rank: this.props.rank,
            
      }

      this.updateRank = this.updateRank.bind(this);
    }


    updateRank(element) { 
      const { id, value } = element.target; 
      let headers: any = {//calls headers};
      var payload = {//payload};
      //get facade
      assignNewRank(payload, headers).then(()=>{
        //call buttonAction function.
        this.props.buttonAction(
          id, value
        )
      }).catch((e: any)=>{})

      this.pageUpdate()
    
    }

    pageUpdate(){
      //window.location.reload()
      
  }
      
      getData = () => {
      //Make API Call};
        let payload: any = {}
        getReferenceValues(payload, headers).then((res:any)=>{
        this.setState({
          data: res.data,
       })
        }).catch((e: any)=>{})
      }
  
      componentDidMount(){
          this.getData();
          this.setState({rank: this.props.rank}, () => {});
      }

      
    render() { 
      return(
        <div> 
          <h5>User Rankings:</h5> 
          <div className='buttonContainer'>
            {this.state.data.map((rank =>  
                <li key={rank.key}>
                  <button id={rank.key} value = {rank.text} onClick={this.updateRank} disabled={rank.key <= this.state.rankId ? true : false}>
                    {rank.text}
                  </button>
                </li>
            ))}
          </div>
        </div>
          
        )
            
      }
    } 

目前该功能有效，只要按下其中一个按钮，我就可以更新用户排名。但是，我已将按钮设置为禁用：disabled={rank.key <= this.state.rankId ? true : false} 问题在于，除非刷新页面，否则我看不到按钮被禁用。我已经设置好了，当你按下一个按钮时，整个页面都会刷新，这很有效，但感觉很草率。

我知道在反应中，您通常必须更新状态才能重新渲染组件，但我不确定如何以与此处类似的方法执行此操作。简而言之，它可以按照我想要的方式工作，但是我需要在值更改后禁用按钮，而无需刷新页面。

Answer 1

您的 updateRank 函数不会更新组件状态，因此 rankId 不会改变，它似乎只是更新您的服务器（？）。 您的容器组件必须将 rankId 作为 prop 传递并将其从组件状态中删除，以便您将其引用为 this.props.rankId 而不是 this.state.rankId，或者您需要在 updateRank 函数中更新您的排名。