防止功能组件使用默认值覆盖数据

Question

我有一个功能组件，它是其他功能组件的包装器。 我从上下文中接收到一个对象，其中包含一些我想在对它进行日期格式化后作为道具传递的数据。 像这样：

<MyComponent
schema={mtaSchema}
monthInitVal={object.month}
yearInitVal={object.year}
/>

let object = { month: '', year: '' };

  function getDateInitialValues(dateOfPurchase) {
    return {
      month: dateOfPurchase.format('M'),
      year: dateOfPurchase.format('YYYY'),
    };
  }

  useEffect(() => {
    if (updatesCar.purchaseDate) {
      object = getDateInitialValues(
        moment(updatesCar.purchaseDate, 'DD-MMM-YYYY'),
      );
    }
  }, [updatesCar.purchaseDate]);

预期的功能是：我继续页面 - 即包含上述组件的页面 - 这也恰好是一个表单。 我对''的初始值很满意，因此该位没问题。

我希望这些默认值在相关的用户交互（这是发生在更远一点的用户事件）之后进行更新。

问题是，由于整个组件是一个功能组件，它会重新渲染几次，然后将我的monthInitVal和yearInitVal重置回它们的原始状态''因为我们从来没有进入useEffect更新到他们需要的东西第二次...因此我为我的 comp 留下了一组''选项:-(

关于如何解决这个问题的任何想法？

Answer 1

我建议使用状态挂钩。 你的let object = { month: '', year: '' }; 应该保持在状态挂钩中，这样可以让它在重新渲染中存活下来

 const [month, setMonth] = useState(0);
 const [year, setYear] = useState(0);

function getDateInitialValues(dateOfPurchase) {
....