提交事件设置state后，e.target.value为何无法在日历中渲染？

原因分析 #

React Big Calendar 默认只会渲染事件对象中的 title 属性，你添加的 price 属于自定义字段，组件不会自动识别并展示——哪怕 state 里的 price 值已经正确更新，日历上也看不到对应的内容。

解决方案 #

有两种方式可以让价格显示在日历上：

方案一：合并价格到 Title 中（快速简单） #

在添加新价格块时，把价格拼接到 title 里，让默认的 title 展示包含价格的内容：

function handleAddPriceBlock() {
  // 保留原有的日期冲突检查逻辑...

  // 拼接标题与价格
  const mergedEvent = {
    ...newPriceBlock,
    title: `${newPriceBlock.title} - $${newPriceBlock.price}`
  };
  setAllPriceBlocks([...allPriceBlocks, mergedEvent]);
}

方案二：自定义事件渲染组件（更灵活） #

通过 components 属性给 Calendar 自定义事件渲染模板，完全控制显示内容：

1. 先定义一个自定义事件组件：

const CustomEvent = ({ event }) => {
  return (
    <div className="custom-event">
      <div>{event.title}</div>
      <div style={{ fontSize: '0.8rem', opacity: 0.8 }}>${event.price}</div>
    </div>
  );
};

2. 在 Calendar 组件中配置 components 属性：

<Calendar
  localizer={localizer}
  events={allPriceBlocks}
  startAccessor="start"
  endAccessor="end"
  style={{ height: 500, margin: "2%" }}
  components={{
    event: CustomEvent
  }}
/>

额外修复：导入错误 #

你的代码里 startOfWeek 的导入路径写错了，这个错误可能导致日历周起始显示异常：

// 错误写法
import startOfWeek from "date-fns/parseISO";
// 正确写法
import startOfWeek from "date-fns/startOfWeek";

内容的提问来源于stack exchange，提问作者StephenW