Я хочу сохранить предыдущее значение в переменной и использовать его в функции. Допустим, если текущее значение равно 9, то предыдущее значение должно быть 8 (например, на одно меньше). Проблема в том, что console.log(prevServings) возвращает неопределенное значение при первом рендеринге и показывает предыдущее значение при втором рендеринге, но разница между текущими и предыдущими значениями равна 2 вместо 1. Я понимаю, что текущее значение недоступно при первом рендеринге, поэтому предыдущее значение не определено, но я не знаю, как это исправить. Любая помощь будет признательна. Заранее спасибо.

 const Child = ({originalData}) =>{
  //clone original data object with useState
  const [copyData, setCopyDta] = useState({});
  //clone the copied data 
  let duplicate = {...copyRecipe};
  
  
  //store previous servings value into a variable
  const usePrevious = (servings) => {
    const ref = useRef();
    useEffect(() => {
      ref.current = servings;
    }, [servings]);

    return ref.current;
  };
  const prevServings = usePrevious(duplicate.servings);
  
  //increase the number of servings on click
  const incrementHandle = () => {
    duplicate.servings = `${parseInt(duplicate.servings)   1}`;
    //this return undefined on the first render
    console.log(prevServings);
    setCopyRecipe(duplicate);
  }

  return(
    <p>{copyData.servings}</p>
    <Increment onClick={incrementHandle}/>
  )
} 

Он возвращается undefined , потому useEffect() что не сработает, по крайней мере, до первого рендеринга. Вы, вероятно, хотите сделать это вместо этого:

 const usePrevious = (servings) => {
  const ref = useRef(servings);
  useEffect(() => {
    ref.current = servings;
  }, [servings])
  return ref.current;
}
 

Хотя мне кажется, что об этом было бы трудно рассуждать. Я бы, вероятно, рекомендовал вместо этого использовать редуктор или обычное состояние. Ссылка полезна, если вы не хотите, чтобы компонент «реагировал» на изменения этого конкретного значения, но каждый раз, когда ссылка изменяется здесь, вы все равно запускаете обновление состояния.

Вопрос

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

Решение

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

 //store previous servings value into a variable
const usePrevious = (value) => {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
};

const Child = ({originalData}) =>{
  //clone original data object with useState
  const [copyData, setCopyDta] = useState({});
  //clone the copied data 
  let duplicate = { ...copyData };
  
  const prevServings = usePrevious(duplicate.servings);
  
  //increase the number of servings on click
  const incrementHandle = () => {
    duplicate.servings = `${parseInt(duplicate.servings)   1}`;
    setCopyDta(duplicate);
  }

  return(
    <p>{copyData.servings}</p>
    <Increment onClick={incrementHandle}/>
  )
}
 

к вашему сведению

Просто к вашему сведению, let duplicate = { ...copyRecipe }; это всего лишь поверхностная копия, а не клон объекта, все вложенные свойства по-прежнему будут ссылками на объекты в исходном объекте. Может быть, это все, что вам нужно, но я просто хотел отметить, что это не настоящий клон объекта.

QnA

Проблема в том, что console.log(предварительные службы) возвращает неопределенное значение при первом рендеринге и показывает предыдущее значение при втором рендеринге

Я бы сказал, что это должно быть ожидаемым поведением, потому что при первоначальном рендеринге не было предыдущего рендеринга, из которого можно было бы кэшировать значение.

но разница между текущими и предыдущими значениями составляет 2 вместо 1.

Что касается проблемы «выключено на 2», из того, что я могу сказать, вы кэшируете не обновленную мелкую копию duplicate каждого рендеринга, и при incrementHandle нажатии вы регистрируете prevServings значение, а затем ставите в очередь обновление, которое запускает повторную отправку. Значение, которое вы регистрируете, и результат обновления состояния (т. Е. <p>{copyData.servings}</p> ) находятся на расстоянии двух циклов визуализации. Если вы сравните оба значения в одной и той же точке цикла рендеринга, вы увидите, что они находятся на расстоянии 1.

 useEffect(() => {
  console.log({ prevServings, current: copyData.servings })
})
 

Вывод журнала:

 {prevServings: undefined, current: 0}
{prevServings: 0, current: "1"}
{prevServings: "1", current: "2"}
{prevServings: "2", current: "3"}
{prevServings: "3", current: "4"}