Reactstrap Button onClick 重定向错误答案

【问题标题】：Reactstrap Button onClick redirection errorReactstrap Button onClick 重定向错误
【发布时间】：2020-10-08 00:54:05
【问题描述】：

reactstrap 中的按钮 onClick 函数没有返回新页面，但我在函数中创建的日志正在工作。它似乎在 renderData() 和 handleExam() 中出现的问题，其中 renderData 应该添加卡片到页面和 handleExam() 重定向到下面给出的具有特定 id 的另一个页面，以便该 id 可用于从 db 获取数据。

import React,{ Component } from "react";
import "./Home.css";
import { userService } from '../_service/user.service'; 
import Exam from "./Exam";
import {
  Card,  CardSubtitle, CardText, Col, CardHeader, Row ,Button
} from 'reactstrap';
class Home extends Component {
  constructor(props){
    super(props);
    this.state = {
      isSucess: false,
      arr:[]
    };
  }

  componentDidMount(){
    userService.getExamDetails().then(
      data =>{
            console.log(data)
            this.setState({arr:data})
            this.setState({isSucess:true});
      },
      error => console.log(error)
      )

  }
  examHandle(id){
    console.log(id);
   return (<Exam id={id} />)  }
  renderData(){
   var rendered = this.state.arr.map( (a,index) => {
     return (
    <Col key={a.exam_id} sm="6">
      <Card key={index} className= { "card -"+ a.exam_id } >
    <CardHeader >{a.exam_name}</CardHeader>
    <CardSubtitle>Start Date : {a.start_date}</CardSubtitle>
    <CardSubtitle>End Date : {a.end_date}</CardSubtitle>
    <CardText>{a.is_payed ? "hello World" : "how old are you"}</CardText>
     <Button color='primary' onClick={()=>{this.examHandle(a.exam_id)}}>Button</Button>
    </Card>
    </Col>);
    })
    return <Row sm="6">{rendered}</Row>;
  }
  render(){
  return (
    <div className="Home">
      <div className="lander">
      <div>{this.state.isSucess ?
         this.renderData()

        :
        <h1>No Active Exams</h1>}
      </div>
      </div>
    </div>
  );
}}

export default Home;

我需要显示的页面

import React from "react";

const Exam = (props)=>{

    return(
        <div>
            Hello World!!!
    <p>{props.id}</p>
        </div>
    );
}
export default Exam;

我尝试直接调用 onClick() 函数，但这也不起作用。

【问题讨论】：

标签： reactjs reactstrap react-button

【解决方案1】：

你必须知道 React 只会在状态改变时重新渲染。如果没有状态变化，返回是没有用的。

你可以做的是学习 React-Router，它可以根据用户交互提供到不同组件的导航。

【讨论】：