Reactjs 如何重构我的react应用程序

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

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

我目前在卡片组件中呈现这些响应。我已经为每个响应创建了一个组件，即

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;

import React，{useState，useffect}来自“React”；
const SlowestResponse=props=>{
const{className，…rest}=props；
const classes=useStyles（）；
康斯特·斯洛韦斯特http://localhost:8080/api/SlowestResponse';
const[data，setData]=useState（[]）；
useffect（（）=>{
const fetchData=async（）=>{
const result=等待获取（slowest响应）；
const jsonresponse=wait result.json（）；
setData（[jsonresponse]）；
};
fetchData（）；
}, []);
返回(

{
data.map（（项目）=>{
返回{item.maxTime}
})
}

);
};
SlowestResponse.propTypes={
类名：PropTypes.string
};
导出默认响应慢；

您可以将React钩子逻辑导出到自定义钩子中并重用它。 因为您只使用

数据

，所以只需要从钩子中返回它的值

以下是一个例子：

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;

import React，{useState，useffect}来自“React”；
const useApi=（）=>{
康斯特·斯洛韦斯特http://localhost:8080/api/SlowestResponse';
const[data，setData]=useState（[]）；
useffect（（）=>{
const fetchData=async（）=>{
const result=等待获取（slowest响应）；
const jsonresponse=wait result.json（）；
setData（[jsonresponse]）；
};
fetchData（）；
}, []);
返回数据；
}
const SlowestResponse=props=>{
常数{
类名，
休息
}=道具；
const classes=useStyles（）；
const data=useApi（）
返回(

{
data.map（（项目）=>{
返回{item.maxTime}
})
}

);
};
SlowestResponse.propTypes={
类名：PropTypes.string
};
导出默认响应慢；

---

您可以在外部文件中导出

useApi

，然后在需要它的每个组件文件中导入它。

是的，没错。但它涉及到在卸载时取消获取请求，这超出了问题的范围。如果需要的话，我可以在答案中加上这一点。顺便说一句，作者的回答中也没有错误处理code@HMR#14369（评论）中的解决方案通常是正确的。（或者您最好取消正在进行的异步工作。）是一个在设置状态之前检查组件是否已安装的示例，以及一个基于上次用户输入取消的竞争条件示例。在大多数情况下，您不需要取消获取请求，只是不需要在卸载时尝试设置结果。反模式是当您添加一个事件监听器，并且仅在调用监听器时检查是否已装入（如windowonscroll）。在这种情况下，最好在卸载时删除侦听器（或钩子中的清理函数）。