类型错误：this.state.postsList.map 不是函数

Question

我开始学习 ReactJs，我试图从假 api https://jsonplaceholder.typicode.com/posts/1获取数据并返回标题和正文。不幸的是，浏览器返回错误：TypeError: this.state.postsList.map is not a function。

当我不是为一篇文章而是为包含所有文章标题的列表（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;

你知道我必须改变什么吗？我怀疑问题出在映射中，因为当我让所有 post API 返回我 [] 而不是 {} 时，是这种情况吗？

Answer 1

class Post extends Component {&nbsp; &nbsp; state = {&nbsp; &nbsp; postsList: [],&nbsp; };componentDidMount() {&nbsp; // const postId = this.props.match.params.id&nbsp; // fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`)&nbsp; fetch('https://jsonplaceholder.typicode.com/posts')&nbsp; .then(response => response.json())&nbsp; &nbsp; .then(data => this.setState({&nbsp; &nbsp; &nbsp; &nbsp; postsList: [...data],&nbsp; &nbsp; }));};renderList = () => this.state.postsList.map((item, id) => <div>>{item.title}></div>);render() { return (this.renderList()&nbsp; );}}postList应该是一个Array。您可以使用扩展运算符来强制执行此操作（但无论如何，索引看起来都包含一个数组）。我还更改了 fetch 以检索/posts索引而不是/posts/:id 这里的主要区别是/posts返回一个post对象数组

Answer 2

这里有两个问题。PostLists被声明为Object初始。将其声明为空arraystate = { postlists : [] }render return语句不正确，您正在返回一个包含在jsx分隔符中的函数。将内部语句包装在Fragments和{ }render(){&nbsp; &nbsp; return(&nbsp; &nbsp; &nbsp; &nbsp; <>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{ this.renderList() }&nbsp; &nbsp; &nbsp; &nbsp; </>&nbsp; &nbsp; )}或者只是删除分隔符render(){&nbsp; &nbsp; return this.renderList()}如果 API 调用返回一个Object而不是数组，您应该将声明保留为空对象并映射它的条目renderList = () => Object.keys(this.state.postsList).map((key, id) => <div>>{this.state.postsList[key].title}></div>)

Answer 3

此外，最初它是一个对象而不是数组class Post extends Component {&nbsp;state = {&nbsp; &nbsp; postsList: [] // update here&nbsp;};&nbsp;componentDidMount() {&nbsp; // const postId = this.props.match.params.id&nbsp; // fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`)&nbsp; fetch('https://jsonplaceholder.typicode.com/posts/1')&nbsp; .then(response => response.json())&nbsp; &nbsp; .then(data => this.setState({&nbsp; &nbsp; &nbsp; &nbsp; postsList: Array.isArray(data) ? data : [data], //just to wrap if it is a sinle object&nbsp; &nbsp; }));};renderList = () => this.state.postsList.map((item, id) => <div>>{item.title}></div>);render() { return (this.renderList()&nbsp; );}}export default Post;这就是你得到的回应。{&nbsp; "userId": 1,&nbsp; "id": 1,&nbsp; "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",&nbsp; "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 方法，这里它返回一个单一的对象，你不能映射它