React JS：将 function 作为道具传递没有按预期工作

Question

我对 React JS 还很陌生，我有一个问题。 我一直在尝试在互联网上搜索我的问题，但找不到解决方案。 在这里：我有 2 个文件，Header.tsx 和 Alerts.tsx。 在 Header.tsx 中有一个名为 alertData 的 function 指示警报的严重性。

const Header = () => {

   useEffect(() => {
   setSomething(getSomething(alertData));
   }, []);

   const alertData = (data: any) => {
   const type: SOMETHING_TYPE = data.type
   switch (type) {
     case 'HEALTH': {
       const message = {
          type: 'info',
          message: `Healthy:`
       }
       return message;
     }
     case 'WARNING': {
    const alert: Alert = data;
      const message = {
          type: 'error',
          message: `Warning: ${alert.severity}`
       }
       return message;
     }
   }

   return (
     <header>
        <Alerts data = {alertData}>
     </header>
   )

}

这是 Alerts.tsx：

const Alerts = (data) => {

console.log("Data:", data)
const classes = useStyles();
const [open, setOpen] = useState(true);


const handleClose = (event, reason) => {
  if (reason === 'clickaway') {
    return;
  }

setOpen(false);
};

return (
  <div className={classes.root}>
    <Snackbar open={open} autoHideDuration={6000} onClose={handleClose} anchorOrigin={{ 
        vertical: 'top', horizontal: 'right' }}>
      <Alert onClose={handleClose} severity={type}>
         { message }
      </Alert>
  </Snackbar>
</div>
);
}

我已将alertData作为<Alert/>的道具放在 Header.tsx 中，但 UI 中仍未显示警报。 我已经检查了 console.log，这是正在传递的数据：

我期待消息被传递给警报，以便它可以显示在 UI 中，但它不显示。 我究竟做错了什么？

Answer 1

您传递 function 而不是消息变量的原因是因为在您的 Header.tsx 中您没有评估alertData function。

const Header = () => {
  // ...

  return (
    <header>
      <Alerts data={alertData}>
    </header>
  );
}

它应该改为：

const Header = () => {
  const [someData, setSomeData] = useState();

  return (
    <header>
      <Alerts data={alertData(someData)}>
    </header>
  );
}

然而，在您的 Alerts.tsx 中，变量data实际上是一个 object 包装字段data而不是您想要的数据。 因此，您应该从以下位置重写组件Alerts ：

const Alerts = (data) => {
}

至

// first approach: es6 destructing assignment
const Alerts = ({data}) => {
  // ...
}

// second approach: create a new variable
const Alerts = (props) => {
  const data = props.data;
  // ...
}