this.state 不显示数组内容，Array(1) = [Array(3)]答案

【问题标题】：this.state not displaying array content, Array(1) = [Array(3)]this.state 不显示数组内容，Array(1) = [Array(3)]
【发布时间】：2020-05-07 23:02:49
【问题描述】：

我正在从公用文件夹的 Blog.json 文件中获取 json 数据，但状态正在返回数组中的一个数组，我无法获取我需要的数据。

这是我的代码：

export default class BlogPage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            resultsLoaded: true,
            blogs: [],
            error: null
        }
    }

        componentDidMount = () => {
            fetch('./Blog.json')
            .then(res => res.json())
            .then(
                (result) => {

                    let blogArray = Object.values(result);

                    this.setState({
                        resultsLoaded: true,
                        blogs: blogArray
                    })
                    return blogArray
                },
                (error) => {
                    this.setState({
                        isLoaded: true,
                        error
                    });
                }
            )
        }

        render() {
            const {error, resultsLoaded, blogs} = this.state;

            if (error) {
                return (
                    <div>Error: {error.message}</div>
                );
            } else if (!resultsLoaded) {
                return (
                    <div>Loading.....</div>
                );
            } else {

            console.log(this.state);

                let blogResults = blogs.map((e, index) => (
                    <div>
                        <h3>Working!</h3>
                        <p>{e.title}</p>
                    </div>
                ))
                return (
                    <div>{blogResults}</div>
                );
            }
        }
    }

我的 JSON 文件如下所示：

{
    "data": [
        {
            "id": "1",
            "title": "Work Ethic",
            "post": "Lorem ipsum dolor sit amet...",
            "image": "",
            "date": ""
        },
        {
            "id": "2",
            "title": "Impostor Syndrome",
            "post": "Lorem ipsum dolor sit amet...",
            "image": "",
            "date": ""
        },
        {
            "id": "3",
            "title": "Getting Hired",
            "post": "Lorem ipsum dolor sit amet...",
            "image": "",
            "date": ""
        }
    ]
}

此图像是控制台中记录的内容：

另外，我收到以下错误：“列表中的每个孩子都应该有一个唯一的“关键”道具。”，并且 {e.title} 不显示。我猜是由于数组错误。

谢谢。

【问题讨论】：

您收到key 消息是因为您没有设置密钥。关于返回值——你得到你所得到的；如果您需要深入研究结果对象，那么就这样做。
似乎博客数组在索引 0 处包含另一个数组。在将其设置为状态之前尝试记录/打印结果。

标签： arrays json reactjs fetch

【解决方案1】：

对于您的关键警告，请执行以下操作：<div key={index}> 在map 方法下的直接 div 标签中。

对于其他问题，您可以发布您的 JSON 文件吗？

很可能您的Object.values 正在解决这个问题。结果，如果你有这样的东西： {blogs: [{...}, {...}, {...}]} 那么显然你的 Object.values 会表现得像这样。如果你想要你想要的行为，那么你应该写类似let blogsArr = results.blogs

【讨论】：

你说得对，这就是我的 json 文件的结构（我已将其添加到问题中）。谢谢，我会尝试设置一个变量。
然后只需替换您的代码以获得预期的行为：let blogArr = result.data

【解决方案2】：

在反应循环中的每个项目都应该有一个键

请参考this

所以

let blogResults = blogs.map((e, index) => (
                    <div key={index}>
                        <h3>Working!</h3>
                        <p>{e.title}</p>
                    </div>))
   return (<div>{blogResults}</div>);

关于 {e.title} 不显示值的问题，请检查对象是否具有该特定键。

【讨论】：