Я перечислил свой ключевой объект, но все равно получаю следующую ошибку: Каждый ребенок в списке должен иметь уникальный ключ.

Question

Я пытаюсь получить данные из остальных API, а затем отобразить их в виде текста в моем браузере. Тем не менее, я продолжаю получать следующую ошибку: index.js:1 Warning: Each child in a list should have a unique "key" prop. У меня есть ключевая опора, указанная ниже. Может кто-нибудь сказать, что я делаю не так? Ниже я перечислил свою ключевую опору, думая, что она будет работать таким образом при рендеринге (я использовал это для другого вызова API в другом проекте, и это сработало).

Так настроена шутка в API.

{
  "id": "R7UfaahVfFd",
  "joke": "My dog used to chase people on a bike a lot. It got so bad I had to take his bike away.",
  "status": 200
}

Вот мой код для его получения.

import React, { Component } from 'react';


class JokesApi extends Component {
    constructor(props){
        super(props);

        this.state = {
            jokes: [],
        };
    }

    componentDidMount(){
        fetch('https://cors-anywhere.herokuapp.com/https://icanhazdadjoke.com/', {
            headers: {
                'Content-Type': 'appliction/json',
                'Accept': 'application/json'
            }
        })
            .then(response => response.json())
            .then(data => this.setState(prev => ({jokes: prev.jokes.concat(data.joke)})))
    }

    render () {
      var jokes;
        return (
            <ul>
                {this.state.jokes.map(joke => 
                  <div key={joke.id}>
                     <p>{jokes}</p>
                  </div>    
                )}
            </ul>
        )
    }
}


export default JokesApi;

Answer 1

Вы устанавливаете массив в строку, представляющую сам шутку при извлечении (data.joke), а не сам объект (data), поэтому joke.id оказывается неопределенным.

вместо получения this.state.jokes, который выглядит следующим образом:

[{
  "id": "R7UfaahVfFd",
  "joke": "My dog used to chase people on a bike a lot. It got so bad I had to take his bike away.",
  "status": 200
}]

вы получаете data, который выглядит следующим образом:

["My dog used to chase people on a bike a lot. It got so bad I had to take his bike away."]

Вот рабочий код:

import React, { Component } from 'react';

class JokesApi extends Component {
    constructor(props){
        super(props);

        this.state = {
            jokes: [],
        };
    }

    componentDidMount(){
        fetch('https://cors-anywhere.herokuapp.com/https://icanhazdadjoke.com/', {
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            }
        })
            .then(response => response.json())
            .then(data => this.setState(prev => ({jokes: prev.jokes.concat(data)})))
    }

    render () {
      console.log(this.state.jokes);
        return (
            <ul>
                {this.state.jokes.map(joke => 
                  <div key={joke.id}>
                     <p>{joke.joke}</p>
                  </div>    
                )}
            </ul>
        )
    }
}

export default JokesApi;