react matrerial 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 驗證已經消失了。 誰能建議我如何讓道具類型也能正常工作。

Answer 1

最佳實踐是使用 axios package 來獲取 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>
  );
};

<