如何将从 useEffect 获得的数据传递到组件树下（未定义）

Question

我想在搜索组件中进行具体计算。为此，我必须将 Header 组件中获得的 buttonSearchRefOffsetLeftValue 传递给搜索组件。我在 Header 中得到了想要的值。但是在搜索组件中，它总是未定义。无法理解这种行为。

const Header = props => {
     const buttonSearchRef = useRef(null);

     let buttonSearchRefOffsetLeftValue;

     useEffect(() => {
         buttonSearchRefOffsetLeftValue = 
         ReactDOM.findDOMNode(buttonSearchRef.current).offsetLeft;
         console.log(buttonSearchRefOffsetLeftValue); //got the value
      })

   return (
      <div ref={buttonSearchRef}>He<div>
             <Search buttonSearchRefOffsetLeftValue= 
          {buttonSearchRefOffsetLeftValue} />
       ) 
     }

 const Search = (props) => {
     console.log(props.buttonSearchRefOffsetLeftValue)//got undefined WHY?
 }

Answer 1

您可能已经注意到了。控制台日志将按如下顺序打印：

undefined

0

这意味着 useEffect 总是在 return 函数之后被调用。我建议你应该有 buttonSearchRefOffsetLeftValue 的状态来传递它的子组件。将你的变量依赖项放在 useEffect.

中对 buttonSearchRefOffsetLeftValue 生效

我的演示：

const Search = (props) => {
    console.log('value'+ props.buttonSearchRefOffsetLeftValue)//got undefined WHY?
    return <div/>
}

const Header = props => {
    const buttonSearchRef = useRef(null);

    const [buttonSearchRefOffsetLeftValue, setButtonSearchRefOffsetLeftValue] = useState(null);

    useEffect(() => {
        let buttonSearchRefOffsetLeftValue = ReactDOM.findDOMNode(buttonSearchRef.current).offsetLeft;
        setButtonSearchRefOffsetLeftValue(buttonSearchRefOffsetLeftValue);
        console.log(buttonSearchRefOffsetLeftValue); //got the value
    }, [
        //put some dependencies will effect your buttonSearchRefOffsetLeftValue
    ])

    return <div>
            <div ref={buttonSearchRef}>He</div>
            <Search buttonSearchRefOffsetLeftValue={buttonSearchRefOffsetLeftValue} />
        </div>;
}

Answer 2

原因是当你第一次这样声明它时，它的值默认是未定义的

 let buttonSearchRefOffsetLeftValue;

然后，在Header的useEffect为运行之前，它会先将此值传递给Search组件。这就是为什么你得到 undefined。之后，当 DOM 完全呈现时，将附加 ref，使用 Effect 运行s 并更新 buttonSearchRefOffsetLeftValue，但这是 not 一个 React状态或道具。因此，它不会在 Search 中更新 props.buttonSearchRefOffsetLeftValue，导致它仍然保持未定义。

一个快速解决方法是将 buttonSearchRefOffsetLeftValue 置于状态

export const Header = (props) => { const buttonSearchRef = useRef(null); const [ buttonSearchRefOffsetLeftValue, setButtonSearchRefOffsetLeftValue] = useState(null); useEffect(() => { setButtonSearchRefOffsetLeftValue(ReactDOM.findDOMNode(buttonSearchRef.current).offsetLeft); console.log('head', buttonSearchRefOffsetLeftValue); //got the value }); return (<div> <div ref={buttonSearchRef}>He</div> <Search buttonSearchRefOffsetLeftValue={buttonSearchRefOffsetLeftValue}/></div>); }

现在您的 Search 组件应该记录控制台两次，第二次打印出值。

如何将从 useEffect 获得的数据传递到组件树下（未定义）

How to pass data got from useEffect down a component tree(got undefined)

ref

reactjs

react-hooks

use-effect

use-ref