Ошибка типа: this.state.postsList.map не является функцией - PullRequest
Новая
       0

Ошибка типа: this.state.postsList.map не является функцией

0 голосов
/ 07 октября 2019

Я начинаю изучать ReactJ и пытаюсь получить данные из поддельного API https://jsonplaceholder.typicode.com/posts/1 и вернуть заголовок и текст сообщения. К сожалению, браузер возвращает мне ошибку: TypeError: this.state.postsList.map не является функцией.

Когда я делаю то же самое не для одного сообщения, а для списка со всеми заголовками сообщений (https://jsonplaceholder.typicode.com/posts/)все работает нормально в приведенном ниже коде. 



class Post extends Component {
    state = {
    postsList: {},
  };

componentDidMount() {
  // const postId = this.props.match.params.id
  // fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`)
  fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
    .then(data => this.setState({
        postsList: data,
    }));

};

renderList = () => this.state.postsList.map((item, id) => <div>>{item.title}></div>);
render() { return (

this.renderList()

  );
}
}
export default Post;

Знаете ли вы, что я должен изменить? Я подозреваю, что проблема в отображении, так как, когда я получаю все сообщения API, верните мне [] не {}, как этослучай

Ответы [ 3 ]

2 голосов
/ 07 октября 2019 
class Post extends Component {
    state = {
    postsList: [],
  };

componentDidMount() {
  // const postId = this.props.match.params.id
  // fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`)
  fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
    .then(data => this.setState({
        postsList: [...data],
    }));

};

renderList = () => this.state.postsList.map((item, id) => <div>>{item.title}></div>);
render() { return (

this.renderList()

  );
}
}

postList должно быть Array. Вы можете использовать оператор распространения, чтобы форсировать это (но похоже, что индекс содержит массив независимо). Я также изменил выборку для получения индекса /posts вместо /posts/:id Ключевое отличие здесь в том, что /posts возвращает массив post объектов

1 голос
/ 07 октября 2019

Две проблемы здесь. PostLists изначально объявлено как Object. Объявите его как пустой оператор array

state = { postlists : [] }

render return неверно, вы возвращаете функцию, заключенную в разделитель jsx. Либо оберните внутренний оператор в Fragments и { }

render(){
    return(
        <>
           { this.renderList() }
        </>
    )
}

Или просто удалите разделитель 

render(){
    return this.renderList()
}

Если вызов API возвращает Object вместо массива, который выследует оставить объявление как пустой объект и отобразить его записи 

renderList = () => Object.keys(this.state.postsList).map((key, id) => <div>>{this.state.postsList[key].title}></div>)
1 голос
/ 07 октября 2019

Кроме того, изначально это объект, а не массив 

class Post extends Component {
 state = {
    postsList: [] // update here
 };
 componentDidMount() {
  // const postId = this.props.match.params.id
  // fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`)
  fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
    .then(data => this.setState({
        postsList: Array.isArray(data) ? data : [data], //just to wrap if it is a sinle object
    }));

};

renderList = () => this.state.postsList.map((item, id) => <div>>{item.title}></div>);
render() { return (

this.renderList()

  );
}
}
export default Post;

Это остаток, который вы получаете. 

{
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
}

Только у массивов есть метод .map, вот онвозвращает один объект, и вы не можете отобразить его

...