axiosInstance.get无法显示数据

Question

我想显示 axiosInstance.get 的回复。我收到回复，但未显示。你能帮我找到解决办法吗？

export default function Tour() {
    const { slug } = useParams();
    const classes = useStyles();

    const [data, setData] = useState({ tours: [] });

    useEffect(() => {
        axiosInstance.get('tours/?slug='+slug).then((res) => {
            const singleTour = res.data
            setData({ tours: singleTour });
            console.log(res.data);
        });
    }, [setData]);

    return (
        <Container component="main" maxWidth="md">
            <CssBaseline />
            <div className={classes.paper}></div>
            <div className={classes.heroContent}>
                <Container maxWidth="sm">
                    <Typography
                        component="h1"
                        variant="h2"
                        align="center"
                        color="textPrimary"
                        gutterBottom
                    >
                        {data.tours.title}
                    </Typography>
                    <Typography
                        variant="h5"
                        align="center"
                        color="textSecondary"
                        paragraph
                    >
                        {data.tours.description}
                    </Typography>
                </Container>
            </div>
        </Container>
    );
}

网络没有错误，但前端没有任何显示

console.log(res.data)

的输出

0:
author: 1
description: "yoga yoga yoga yoga yoga"
end_date: "2022-01-15T14:25:31Z"
id: 1
reg_end_date: "2022-01-15T14:25:36Z"
reg_start_date: "2022-01-15T14:25:33Z"
slug: "tour"
start_date: "2022-01-15T14:25:30Z"
status: 2
title: "new yoga tour"

Answer 1

如果响应始终是长度为 1 的数组，那么我不会费心将它作为数组存储在状态中。将它存储为一个对象，它匹配它在渲染中的访问方式并保持状态不变。

export default function Tour() {
  ...

  const [data, setData] = useState({ tours: {} }); // <-- use object

  useEffect(() => {
    axiosInstance.get('tours/?slug='+slug).then((res) => {
      const [singleTour] = res.data; // <-- array destructuring assignment
      setData({ tours: singleTour });
      console.log(res.data);
    });
  }, [setData]);

  return (
    <Container component="main" maxWidth="md">
      ...
        <Container maxWidth="sm">
          <Typography ... >
            {data.tours.title}
          </Typography>
          <Typography ... >
            {data.tours.description}
          </Typography>
        </Container>
      </div>
    </Container>
  );
}

axiosInstance.get无法显示数据

axiosInstance.get can't display data

http

reactjs

axios