Ошибка перенаправления кнопки Reactstrap onClick - PullRequest
Новая
       88

Ошибка перенаправления кнопки Reactstrap onClick

0 голосов
/ 18 июня 2020

Функция Button onClick в responsestrap не возвращает новую страницу, но журнал, который я сделал внутри функции, работает. Проблема, похоже, в renderData () и handleExam (), где renderData должен добавлять карты в страница и handleExam () перенаправляют на другую страницу, указанную ниже, с определенным c идентификатором, чтобы этот идентификатор можно было использовать для получения данных из базы данных. 

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 (), но это тоже не работает.

1 Ответ

0 голосов
/ 18 июня 2020

Вы должны знать, что React будет повторно выполнять рендеринг только при изменении состояния. Нет смысла возвращаться, если нет изменения состояния.

Что вы можете сделать, так это изучить React-Router, который может обеспечивать навигацию по различным компонентам в зависимости от взаимодействия с пользователем.

...