Question

我的主页是一个简单的功能组件，当用户到达该页面时，我必须调用一个props回调（以清除父级的状态）。

我需要这样的想法：

  async componentDidMount() {
    this.props.handleChange("ticket",{});
  }

我读到我可以使用useEffect钩子来做到这一点，但是我不确定如何调用handleChange道具。

  useEffect(() => {
    //handleChange('ticket', {});
  });

主页组件：

export default function Home() {
  return (
    <Fragment>
      <div>
        <Hello />
        <div css={{ textAlign: 'center' }}>
          <Button to="/departments" styles={buttonStyles}>
            Next
          </Button>
        </div>
      </div>
      <Footer />
    </Fragment>
  );
}

父项handleChange函数：

 makeHandleChange = (pageName, change) => {
    this.setState({
      ticket: { ...this.state.ticket, [pageName]: change },
    });
  };

编辑：

 export default function Home(props) {
  useEffect(() => {
    console.log('test');
    props.handleChange('departments', {});
    props.handleChange('categories', {});
    props.handleChange('subCategories', {});
  }, []);

  return (
    <Fragment>
      <div>
        <Hello />
        <div css={{ textAlign: 'center' }}>
          <Button to="/departments" styles={buttonStyles}>
            Next
          </Button>
        </div>
      </div>
      <Footer />
    </Fragment>
  );
}

Answer 1

要模仿componentDidMount并从道具中调用函数，请按以下步骤操作：

export default function Home(props) {
    useEffect(() => {
       props.handleChange("ticket",{});
    }, []); // <-- This empty array is important

   /* ... */
}

更多说明：

第二个参数告诉钩子它应该作出反应并更新为什么。您可以收听useState创建的状态变量以及道具。

const [state, setState] = useState(0);
useEffect(() => {}, [props.id, state]); // Listen to state changes and prop changes

如果省略第二个参数，则该钩子将在所有更改（状态和道具）上触发。

// This will trigger on mount and all changes
useEffect(() => {})

将其保留为空数组只会触发一次效果，即在组件安装时（第一次渲染之后）。

更多信息和参考：Using the Effect Hook - React

挂钩与道具

1 个答案: