我的 map function 在反應 js 中不起作用

Question

import React, { Component } from "react";
import { TextField } from "@material-ui/core";
import SearchResult from "./SearchResult";

class Search extends Component {
    constructor() {
    super();
    this.state = {
        data: [],
    };
    this.renderRes = this.renderRes.bind(this);
    }
    handelTextFieldChange(e) {
    fetch(`http://localhost:8000/api/search-post?query=${e.target.value}`)
        .then((res) => res.json())
        .then((data) => {
        this.setState({
            data: data,
        });
        console.log(this.state.data);
        });
    }
    renderRes() {
    return (
        <div>
        {Array(this.state.data).map((_, index, blog) => {
            return (
            <SearchResult
                content={blog[index]["body"]}
                date={String(blog[index]["date"])}
                author={blog[index]["author"]}
                title={blog[index]["title"]}
            />
            );
        })}
        </div>
    );
    }
    render() {
    return (
        <div id="search">
        <div className="search-box">
            <TextField
            id="outlined-basic"
            label="Enter any Keyword"
            variant="outlined"
            onChange={(e) => this.handelTextFieldChange(e)}
            />
        </div>
        <div className="search-results">{this.renderRes()}</div>
        </div>
    );
    }
}

export default Search;

我的獲取數據--->

[
{"author": "Pranav Tripathi",
 "title": "What is Diet?", "body": "In nutrition, diet is the sum of food consumed by a person or other organism.[1] The word diet often implies specific nutrition intake for health or weight-management reasons (with the two often being related). Although humans are omnivores, each culture and each person holds some food preferences or some food taboos. This may be due to personal tastes or ethical reasons. Individual dietary choices may be more or less healthy. Complete nutrition requires ingestion and absorption of vitamins, minerals, essential amino acids from protein and essential fatty acids from fat-containing food, also food energy in the form of carbohydrates, protein, and fat. Dietary habits and choices play a significant role in the quality of life, health, and longevity.", 
"date": "2021-05-23 21:15:13.603332+00:00",
 "post_id": "ABCDEF"}
]

還有更多，但我要發送第一個，因為其他大部分都相同。

在我調試的時候。 它主要給出未定義的。 我在 Django 中制作了 API。 從后端來看，它運行良好。 但從前端來看，它沒有。 我對反應更新鮮我正在制作項目來學習它，因此，反應代碼不是行業標准

Answer 1

如果你的數據是一個數組，你為什么不只是

 return (
                  <SearchResult
                    content={blog.body}
                    date={blog.date}
                    author={blog.author}
                    title={blog.title}
                />
 )
})

或者您可以簡單地將 {...blog} 傳遞給您的組件

Answer 2

您的數據已經在數組中，因此您不需要再次將其轉換為數組，這是導致未定義的主要原因，另一點是映射回調，它將博客作為第一個參數，索引作為第二個，所以map 結果的正確方法如下

 renderRes() {
    return (
        <div>
        {this.state.data.map((blog,index) => {
            return (
            <SearchResult
                content={blog["body"]}
                date={String(blog["date"])}
                author={blog["author"]}
                title={blog["title"]}
            />
            );
        })}
        </div>
    );
    }