React：在 Child 渲染时修改 Parent 状态

Question

挂钩通常比类好得多，所以我试图传递在 parent 的 child 中设置 parent 状态的能力=] 使用钩子。具体来说，我正在做这样的事情：

class Parent extends Component {

    render = () => {
        return <>
           <Child useRegisterFoo={foo => {...;this.setState(foo);...;}} />
           { renderBasedOnRegister() }
           </>
    }
}

目标是能够像这样定义 child：

const Child = ({useRegisterFoo}) => {
     useRegisterFoo(1);
     useRegisterFoo(2);
}

我会定义很多这样的 children，因此有这样一个简单的 useRegisterFoo 来注册 child 的特定属性将非常有用。

问题是，如果以这种方式完成，反应会抱怨，这是可以理解的，因为我正在修改 parent 的状态，而 parent 正在呈现。具体说：

Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.

解决这个问题的更好方法是什么？我的主要目标是使 API 从 child 的角度尽可能方便。

Answer 1

您正在函数体中直接调用回调。这是无意的副作用，不应该这样做。即使在功能组件中，您仍然需要处理组件生命周期。

Warning: Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state.

函数组件的整个主体是“渲染”函数。使用 useEffect 挂钩调用这些传递的回调，或有条件地调用它们作为事件处理程序的一部分。

示例：

使用带有空依赖项数组的 useEffect 挂钩，在组件挂载时仅触发一次效果。

const Child = ({useRegisterFoo}) => {
  useEffect(() => {
    useRegisterFoo(1);
    useRegisterFoo(2);
  }, []); // <-- empty dependency, effect triggered once on mount
  ...
}

React：在 Child 渲染时修改 Parent 状态

React: Modify Parent State While Child Renders

purely-functional

reactjs

react-hooks