时间戳

首页 > 解决方案 > React Hooks 第二个组件

reactjs - React Hooks 第二个组件

问题描述

我有一个显示表格的 EventTable 组件，表格中的一个单元格包含另一个名为 EventDialog 的组件，我希望能够按下一个打开 FullScreenDialog 按钮的按钮，该按钮显示对话框屏幕并进行 API 调用。我面临的问题是 API 调用仅在页面在父组件中呈现时进行，而不是在按下按钮时进行。

这是 EventTable.js

这是 FullScreenDialog.js

export default function FullScreenDialog(props) {
  const [open, setOpen] = React.useState(false);
  const [countries, setCountries] = useState([]);
  const [load, setLoad] = useState(false);
  const [error, setError] = useState('');

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };


  useEffect(() => {
    axios.get(`https://localhost:44392/api/events/${props.rowId}`)
        .then(res => {
            setCountries(res.data);
            console.log(res.data)
            setLoad(true);
        })
        .catch(err => {
            setError(err.message);
            setLoad(true)
        })
}, []);

console.log(props.rowId)

  return (
    <div>
    </div>
  );
}

标签： reactjs

解决方案

useEffect应该观察open变量是否改变。因此，每次open设置为 true 时，都应进行 API 调用。

您的useEffect代码应如下所示

useEffect(() => {
    if (open) {
      axios.get(`https://localhost:44392/api/events/${props.rowId}`)
        .then(res => {
            setCountries(res.data);
            console.log(res.data)
            setLoad(true);
        })
        .catch(err => {
            setError(err.message);
            setLoad(true)
        })
   }
}, [open]);

推荐阅读