Question

我是React JS的新手。我需要重构我的React应用程序。目前，我正在对Spring后端进行API调用，并且有以下响应：-

"avgTime": 250.0769,
"minTime": 100.0,
"maxTime": 500.0

我目前在Card组件中呈现这些响应。我为每个响应创建了一个组件，即avgTime，minTime，maxTime，但是我在每个组件中都进行了相同的API调用。这是一个好习惯吗？如何在这些组件中重用我的API调用。

反应代码：-

import React, {useState, useEffect} from 'react';


const SlowestResponse = props => {
  const { className, ...rest } = props;

  const classes = useStyles();

  const SlowestResponse = 'http://localhost:8080/api/SlowestResponse';

  const [data, setData] = useState([]);
  useEffect(() => {
  const fetchData = async () => {
    const result = await fetch(SlowestResponse);
    const jsonresponse = await result.json();
    setData([jsonresponse]);
  };
  fetchData();
  }, []);


  return (
      <CardContent>
        <Grid
          container
          justify="space-between"
        >
          <Grid item>
            <Typography
              className={classes.title}
              color="textSecondary"
              gutterBottom
              variant="body2"
            >
            </Typography>
            <Typography variant="h3">
              <ul>
                {
                  data.map((item) => {
                    return <div>{item.maxTime}</div>
                  })
                }
              </ul>
            </Typography> 
          </Grid>
        </Grid>
      </CardContent>
  );
};

SlowestResponse.propTypes = {
  className: PropTypes.string
};

export default SlowestResponse;

Answer 1

您可以在自定义钩子中导出React钩子逻辑并重新使用它。由于仅使用data，因此只需要从钩子中返回其值即可。

这里是一个例子：

import React, {useState, useEffect} from 'react';

const useApi = () => {
  const SlowestResponse = 'http://localhost:8080/api/SlowestResponse';

  const [data, setData] = useState([]);
  useEffect(() => {
    const fetchData = async () => {
      const result = await fetch(SlowestResponse);
      const jsonresponse = await result.json();
      setData([jsonresponse]);
    };
    fetchData();
  }, []);

  return data;
}

const SlowestResponse = props => {
  const {
    className,
    ...rest
  } = props;

  const classes = useStyles();

  const data = useApi()

  return (<CardContent>
    <Grid container="container" justify="space-between">
      <Grid item="item">
        <Typography className={classes.title} color="textSecondary" gutterBottom="gutterBottom" variant="body2"></Typography>
        <Typography variant="h3">
          <ul>
            {
              data.map((item) => {
                return <div>{item.maxTime}</div>
              })
            }
          </ul>
        </Typography>
      </Grid>
    </Grid>
  </CardContent>);
};

SlowestResponse.propTypes = {
  className: PropTypes.string
};

export default SlowestResponse;

您可以将useApi导出到外部文件中，并将其导入需要的每个组件文件中。

我该如何重构我的React应用程序

1 个答案: