React应用中map函数调用报错：this.state.comments.map is not a function 的问题求助

我一眼就看出问题出在你发布评论的逻辑里！咱们来一步步拆解：

问题根源 #

JavaScript的Array.push()方法返回的不是新数组，而是数组添加元素后的长度（一个数字）。你现在的代码把这个返回值赋值给了comments状态：

this.setState({
  comments: this.state.comments.push({ 
    user: this.state.currentUser, 
    data: this.state.currentData 
  })
});

点击按钮后，comments就从数组变成了数字，自然没法调用map方法，这就是报错的核心原因。另外，你直接修改this.state.currentUser = ""的操作也不符合React的规则——永远不要直接修改state，必须通过setState来更新状态。

修复方案 #

我们需要创建一个新数组来保存更新后的评论，同时用setState统一处理状态更新：

修改按钮的onClick逻辑为：

onClick={() => {
  if (this.state.currentUser && this.state.currentData) {
    this.setState(prevState => ({
      // 用扩展运算符创建新数组，添加新评论
      comments: [...prevState.comments, {
        user: prevState.currentUser,
        data: prevState.currentData
      }],
      // 清空输入框状态
      currentUser: "",
      currentData: ""
    }));
  }
}}

为什么这么做？ #

1. 使用扩展运算符...：它会复制原数组的所有元素，再加上新的评论，返回一个全新的数组，保证state的引用是新的，React才能正确识别状态变化并重新渲染。
2. 函数式更新setState(prevState => {})：当新状态依赖于旧状态时，用函数式更新能避免React状态更新的异步性导致的逻辑错误。
3. 统一用setState清空输入框：严格遵循React的状态更新规则，不直接修改state对象。

修复后的完整组件代码 #

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import './index.css'; 
import reportWebVitals from './reportWebVitals'; 

class MyName extends React.Component { 
  constructor() { 
    super(); 
    this.state = { 
      currentUser: "", 
      currentData: "", 
      comments: [
        { user: "User One", data: "Hi, hello world!" }, 
        { user: "User Two", data: "Hi, hello world!" }
      ] 
    } 
  }

  comments_section() { 
    if (this.state.comments.length === 0) { 
      return <span>No Comments.</span> 
    } else { 
      return (
        <ul className="space-y-4">
          {this.state.comments.map((item) => (
            <li className="flex items-start space-x-2" key={item.user + item.data}> 
              <div className="flex flex-col items-start space-y-1"> 
                <img className="rounded-full" src="http://placekitten.com/50/50" /> 
                <span className="text-xs text-gray-500">{item.user}</span> 
              </div> 
              <span>{item.data}</span> 
            </li>
          ))} 
        </ul>
      ) 
    } 
  }

  render() { 
    return (
      <div className="rounded border border-indigo-400 m-8 p-2"> 
        <div className="flex flex-col items-stretch space-y-2"> 
          <input 
            type="text" 
            placeholder="Who you are?" 
            className="border border-gray-500" 
            value={this.state.currentUser} 
            onChange={(e) => { 
              this.setState({currentUser: e.target.value}); 
            }} 
          /> 
          <textarea 
            placeholder="Say something" 
            className="h-32 border border-gray-500" 
            value={this.state.currentData} 
            onChange={(e) => { 
              this.setState({currentData: e.target.value}); 
            }}
          ></textarea> 
          <button 
            className="bg-green-400 text-green-100 rounded py-1 hover:bg-green-600" 
            onClick={() => { 
              if (this.state.currentUser && this.state.currentData) { 
                this.setState(prevState => ({
                  comments: [...prevState.comments, {
                    user: prevState.currentUser,
                    data: prevState.currentData
                  }],
                  currentUser: "",
                  currentData: ""
                }));
              } 
            }}
          >Post comment </button> 
        </div> 
        <div className="mt-8"> 
          {this.comments_section()} 
        </div> 
      </div>
    ); 
  } 
} 

ReactDOM.render( 
  <MyName />, 
  document.getElementById('root') 
); 
reportWebVitals();

这样修改后，点击发布按钮就不会再报错，评论也能正常添加展示了！

内容的提问来源于stack exchange，提问作者Just a learner