React中实现选日期后点击按钮再重新渲染组件的方法

你的核心问题是选日期时直接修改了用于渲染图表的状态startDate，导致组件立刻重渲染。要实现「选日期→点按钮→更新组件」的流程，只需要把「用户临时选择的日期」和「实际用于渲染的日期」拆成两个状态，点击按钮时再同步即可。

修改方案 #

1. 新增临时状态tempStartDate，用于存储用户在DatePicker中选择的日期（选日期时只改这个状态，不会触发图表更新）。
2. 保留activeStartDate作为实际传给图表组件的日期，只有点击按钮时才更新它。
3. 移除不必要的renderPages状态和空的useEffect，简化逻辑。

修改后的完整代码 #

import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import 'react-datepicker/dist/react-datepicker-cssmodules.css';
import Spinner from '../../components/layout/Spinner';

// Cards Paginas
import Pagina1 from '../../components/tableros/Cards/Pagina1';
import Pagina2 from '../../components/tableros/Cards/Pagina2';
import Pagina3 from '../../components/tableros/Cards/Pagina3';
import Pagina4 from '../../components/tableros/Cards/Pagina4';
import Pagina5 from '../../components/tableros/Cards/Pagina5';
import Pagina6 from '../../components/tableros/Cards/Pagina6';

const ReporteDiario = () => {
  // 实际用于渲染图表的日期
  const [activeStartDate, setActiveStartDate] = useState(new Date());
  // 临时存储用户选择的日期
  const [tempStartDate, setTempStartDate] = useState(new Date());

  const handleUpdateClick = () => {
    // 点击按钮时，把临时日期同步到激活日期，触发组件重渲染
    setActiveStartDate(tempStartDate);
  }

  function PagesComponent() {
    return (
      <div className="cards-container">
        {/* 传给子组件的是激活日期，只有点击按钮后才会更新 */}
        <Pagina1 date={activeStartDate} />
        <Pagina2 />
        <Pagina3 />
        <Pagina4 />
        <Pagina5 />
        <Pagina6 />
      </div>
    );
  }

  return (
    <>
      <aside className='col-span-2 border-2 border-blue-600'>
        <div className="form-group">  
          <DatePicker
            selected={tempStartDate}
            showIcon
            onChange={(date) => setTempStartDate(date)}
            isClearable
            dateFormat="yyyy-MM-dd"
            placeholderText="Select date"
            closeOnScroll={true}
          />
        </div>  
      </aside>

      <div>
        <button 
          id='ReporteDiario' 
          onClick={handleUpdateClick} 
          className='text-left pl-1 my-1 border-2 border-blue-600'
        >
          Update Dashboard
        </button>
        <PagesComponent />
      </div>
    </>
  )
}

export default ReporteDiario

关键逻辑说明 #

• 选日期时只会更新tempStartDate，这个状态不传给图表组件，所以不会触发图表重渲染。
• 点击「Update Dashboard」按钮时，才将tempStartDate的值赋值给activeStartDate，此时依赖activeStartDate的Pagina1等组件才会重新渲染，加载对应日期的图表数据。
• 移除了原来的renderPages显隐逻辑，因为我们只需要控制数据更新时机，不需要通过显隐来触发重渲染。

内容的提问来源于stack exchange，提问作者David Hernández Uriostegui