react material ui Error: Objects are not valid as a React child 如果你打算渲染一个子集合，请改用数组

Question

我遇到了以下代码的错误，似乎没有解决我的问题的修复程序。

componentDidMount() {
    axios.get('http://localhost:8080/home')
      .then((response) => {
        this.setState({
          data: response.data
        });
      })
      .catch((err) => {
        console.log(err);
      });
}

来自服务器的响应：

{"data":{"count":{"monthly_blog_count":1,"total_blog_count":1,"monthly_poem_count":0,"total_poem_count":0,"monthly_song_count":0,"total_song_count":0,"monthly_graphics_count":1,"total_graphics_count":1},"latest_graphics":{"link":"ganesha.svg"},"latest_blog":{"title":"test","created":"2021-05-08T07:49:50.000Z","name":"Abhishek Banerjee"},"latest_blog_list":[{"title":"test","created":"2021-05-08T07:49:50.000Z","name":"Abhishek Banerjee"}]}}

<Poems data={data} />

这是编辑的诗歌组件，因为它不允许所有代码： 基本元素是卡片。我从诗歌组件中取出代码，因为它抱怨文本不足。我也对组件进行了原型验证。

const Poems = (props) => {
  const {
    data: count,
    'data.count.total_poem_count': totalPoemCount,
    'data.count.monthly_poem_count': monthlyPoemCount,
  } = props;

  return (
        <Card
          sx={{ height: '100%' }}
          {...props}
        >
          <Grid item>
            <Typography
              color="textPrimary"
              variant="h3"
            >
              { totalPoemCount }
            </Typography>
          </Grid>
          
          <Typography
            sx={{
              color: green[900],
              mr: 1
            }}
            variant="body2"
          >
            { monthlyPoemCount }
          </Typography>
     </card>
  );
};

编辑

输入{ data?.data?.count?.total_poem_count } 就像一个魅力。但是 proptypes 验证已经消失了。谁能建议我如何让 proptypes 也能正常工作。

Answer 1

最佳实践是使用 axios 包获取 api。

axios.get("http://localhost:8080/home")
.then((response) => {
        this.setState({
          data: response.data
        });
      })
      .catch((err) => {
        console.log(err);
      });

向组件传递数据

<Poems data={this.state.data} />

子组件

const Poems = ({ data }) => {
const dataToRender = data?.data


  return (
        <Card
          sx={{ height: '100%' }}
          {...props}
        >
          <Grid item>
            <Typography
              color="textPrimary"
              variant="h3"
            >
              { dataToRender.count.totalPoemCount }
            </Typography>
          </Grid>
          
          <Typography
            sx={{
              color: green[900],
              mr: 1
            }}
            variant="body2"
          >
            { dataToRender.count.monthlyPoemCount }
          </Typography>
     </card>
  );
};