React - useMemo 有一个复杂的表达式 - 将其提取到一个单独的变量，以便可以静态检查

Question

我正在尝试使用useMemo，但我收到了来自 lint 的消息：

React Hook useMemo 在依赖项数组中有一个复杂的表达式。将其提取到一个单独的变量中，以便可以静态检查react-hooks/exhaustive-deps。

会是什么呢？

const [selectedDate, setSelectedDate] = useState("Escolha uma data para pagamento");
const itens = useMemo(() => {
  if (!contrato.propostas || contrato.propostas.length == 0) return [];
  let dates = contrato.propostas.map(p => p.vencimento)
  dates = Array.from(new Set(dates)).map((item) => ({
    id: item,
    option: item
  }))
  if (dates.length === 1 && selectedDate !== contrato.filterByDate) setSelectedDate(dates[0].option)
  if (contrato.filterByDate && dates.find(d => d.id === contrato.filterByDate) !== -1) setSelectedDate(contrato.filterByDate);
  return dates;
}, [JSON.stringify(contrato.propostas), contrato.filterByDate, selectedDate])

contrato和contrato.propostas是对象。
contrato.filterByDate是一个字符串。
我试图找到一个开放的问题，但我找不到。

Answer 1

它告诉你这样做：

const [selectedDate, setSelectedDate] = useState("Escolha uma data para pagamento");
const temp = JSON.stringify(contrato.propostas);
const itens = useMemo(() => {
 // ...
}, [temp, contrato.filterByDate, selectedDate])

但我不明白你为什么要字符串化contrato.propostas。您从不使用字符串化版本，因此它实际上不是依赖项。只要你保持数据不可变（就像在 React 中应该的那样），那么你只需要将 contrato.proppostas 直接放入依赖项数组中：

const [selectedDate, setSelectedDate] = useState("Escolha uma data para pagamento");
const itens = useMemo(() => {
 // ...
}, [contrato.propostas, contrato.filterByDate, selectedDate])