React事件处理程序中Prop嵌套值读取异常问题

你遇到的是React闭包陷阱：onBlur函数在组件首次渲染时被创建，它捕获了当时的obj引用。之后父组件更新obj，子组件虽会重新渲染，但绑定到Input上的旧onBlur函数仍持有挂载时的obj引用，导致判断条件永远使用初始值。

下面是几种可行的解决方法：

方案1：用useCallback包裹事件处理函数 #

通过useCallback包裹onBlur，并将obj加入依赖数组，确保每次obj更新时生成新的事件函数，捕获最新的obj值：

import { useEffect, useCallback } from 'react';

const Child = ({ obj, onUpdate }) => {
  useEffect(() => {
    console.log(obj.nested.property);
  }, [obj])

  const onBlur = useCallback((newValue) => {
    if (newValue !== obj.nested.property) {
      onUpdate(newValue)
    }
  }, [obj, onUpdate])

  return (
    <Input value={obj.nested.property} onBlur={onBlur}/>
  )
}

方案2：用useRef保存最新的Props值 #

如果不想频繁创建新的事件函数，可以用useRef存储最新的obj，在useEffect中同步更新ref，事件处理时直接读取ref的当前值：

import { useEffect, useRef } from 'react';

const Child = ({ obj, onUpdate }) => {
  const objRef = useRef(obj);

  useEffect(() => {
    console.log(obj.nested.property);
    objRef.current = obj;
  }, [obj])

  const onBlur = (newValue) => {
    if (newValue !== objRef.current.nested.property) {
      onUpdate(newValue)
    }
  }

  return (
    <Input value={obj.nested.property} onBlur={onBlur}/>
  )
}

方案3：精准依赖嵌套属性 #

如果只关心obj.nested.property这一个值，可以直接解构该属性，将其作为依赖项，让逻辑更精准：

import { useEffect, useCallback } from 'react';

const Child = ({ obj, onUpdate }) => {
  const currentValue = obj.nested.property;

  useEffect(() => {
    console.log(currentValue);
  }, [currentValue])

  const onBlur = useCallback((newValue) => {
    if (newValue !== currentValue) {
      onUpdate(newValue)
    }
  }, [currentValue, onUpdate])

  return (
    <Input value={currentValue} onBlur={onBlur}/>
  )
}

内容的提问来源于stack exchange，提问作者Marina I.