使用子->父回调寄存器模型从 React 子组件读取状态时出现问题

Question

我正在维护一个基于 Class 的遗留 React 项目，并在进行过程中引入功能组件。尝试避免完全重写的解决方法之一是允许子组件通过 'registration' 模型与父组件通信，其中子组件向父组件注册自己，而父组件调用子函数。

我的问题是父级似乎无法访问子状态（调用 'getChildValue()' 函数总是 returns 初始子状态。）

我想在基于 class 的世界中，我只需将 (this) 绑定到该函数就可以了。

谁能帮忙：

说明问题的笔在这里：

单击 'Inc Value In Child' 会增加状态，但 'Get Value From Child' 总是 returns 1（初始状态）

const ChildElement = (props) =>
{
  const [ value, setValue ] = useState ( 1 ) ;

  const getValue = () =>
  {
    console.log ( "getValue Called");
    return value ;
  }
  
  useEffect(() => {
      
      props.register ( {
        getValue: getValue
      }) ;
      
    }, [] ) ;
   
  const incChildValue = () =>
  {
    setValue ((value) => value + 1);  
  }
 
  return <div>
    <h1>Child Component Value Currently = {value}</h1>
    <button type='button' onClick={incChildValue} >Inc Value In Child</button>
    
  </div>
}

这是父 'legacy' 容器：

class Container extends React.Component
{
  constructor ( props )
  {
    super(props) ; 
    
    this.register = this.register.bind(this) ;
    this.getChildValue = this.getChildValue.bind(this);
    
    this.childRef = React.createRef();  
  }
  
  register ( childFuncs )
  {
    console.log ( "Registered");
    console.log ( childFuncs );

    this.childRef.current = childFuncs ;
  }

  getChildValue ()
  {
    const childValue = this.childRef.current.getValue() ; 
    
    alert ( "This Should not be 1 - " + childValue );
  }
  
  render()
   {
    return (
      <div>
        <div>Container</div>
        <ChildElement register={this.register} />
        <button type='button' onClick={this.getChildValue} >Get Value From Child</button>
      </div>
    )
   }
}

Answer 1

问题是，在您的子组件上，useEffect 没有依赖项，因此 register 函数只会运行挂载。每次更改值时都需要运行。所以将值添加为依赖项。

useEffect(() => {
  props.register({
    getValue: () => {return value;}
  });
}, [value]);

使用子->父回调寄存器模型从 React 子组件读取状态时出现问题

Problem reading state from React child Components using child->parent callback register model

javascript

reactjs

es6-class