this.state не отображает содержимое массива, Array (1) = [Array (3)]

Question

Я извлекаю данные json из блога папки publi c. Файл 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} не отображается. Я думаю, из-за ошибки массива.

Спасибо.

Answer 1

Для вашего ключевого предупреждения, сделайте так: <div key={index}> в вашем непосредственном теге div в методе map.

Для другой проблемы вы можете опубликовать свой файл JSON?

Скорее всего, ваша Object.values решает эту проблему. В результате, если у вас есть что-то вроде этого: {blogs: [{...}, {...}, {...}]}, тогда, очевидно, ваши Object.values ​​будут вести себя так. Если вы хотите, чтобы ваше предполагаемое поведение, то вы должны написать что-то вроде let blogsArr = results.blogs

Answer 2

В ответ каждый элемент внутри al oop должен иметь ключ

, пожалуйста, укажите этот

, поэтому

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

относительно { e.title} не показывает значение проблемы, пожалуйста, проверьте, что объект имеет этот конкретный ключ.