Блог

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

 import './App.css';
import Charts from './Charts/Charts'
import LeftSideBar from './LeftSideBar/LeftSideBar'
import RightSideBar from './RightSideBar/RightSideBar'
import {useState} from 'react'
import DateContext from './context/DateContext'

function App() {
  const [startDate, setStartDate] = useState(new Date());
  const [endDate, setEndDate] = useState(new Date());
  const [result,setResult] = useState(16)
  if (result > 41 ){
    setResult(0)
  }
  return (
    <div className="App">

        <DateContext.Provider value={{startDate:startDate,endDate:endDate,result:result}}>
                    <LeftSideBar />
                    <Charts/>
                    <div></div>
                    <div></div>
                    <RightSideBar 
                    setStartDate={setStartDate} 
                    setEndDate={setEndDate} 
                    setResult={setResult}
                    />
        </DateContext.Provider>
    </div>
  )
}

export default App;
 

Это моя DatePicker логика, в которой находится моя логика, я хочу, чтобы эта кнопка повторно отображала мой Chart компонент при вызове

 import React, { useContext } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import '../style.css'
import DateContext from "../context/DateContext";

const Datepicker = (props) => {
    const {setStartDate, setEndDate, setResult} = props
    const {startDate,endDate} = useContext(DateContext)
    const handleCalculation = () =>{
        let substractedTime = endDate.getTime() - startDate.getTime()
        let substractedDays = substractedTime/ (1000 * 3600 * 24)
        setResult(Math.floor(substractedDays/7))
    }
    return (
    <>
    <h6>DATE DES DERNIERES REGLES</h6>
       <div className="picker1"><DatePicker selected={startDate} onChange={date => setStartDate(date)} /></div>
    <h6>DATE DE LA CONSULTATION</h6>
      <div className="picker2"><DatePicker selected={endDate} onChange={date => setEndDate(date)} /> 
      </div>
      <button className='btn submit' onClick={()=>{handleCalculation()}}>Calculer</button>
    </>
    );
  };

export default Datepicker
 

Прежде всего, в «React» вы должны использовать условное setState внутри «useEffect». Итак, согласно вашему коду, вы должны заменить этот код:

 if (result > 41 ){
  setResult(0)
}
 

С помощью:

 useEffect(() => {
  if (result > 41 ){
    setResult(0)
  }
},[result])
 

И в случае вашей проблемы с повторным отображением, согласно вашему заданному коду, функция «handleCalculation ()» вызывается при нажатии кнопки. И функция «handleCalculation ()» вызывает «SetResult ()». Итак, в соответствии с функциональностью React, ваш компонент «Приложение» должен повторно отображаться. Итак, в этом случае в вашем коде нет ничего плохого. В компоненте «Диаграммы» может быть какая-то проблема.

Вы также можете проверить, происходит ли повторный рендеринг или нет, используя «console.log» непосредственно перед операцией «return ()». Нравится:

 function App() {
  ...your code...

  console.log("Rendered");

  return (
    ...your code...
  );
}