使用map()/find()函数无法获取传入的props，传入值恒为null的技术求助

看起来你遇到的问题是调用map()时，要遍历的数组（不管是this.state.msg还是Redux里的chatmsg）是null或空值，导致没法正常渲染内容。我结合你贴的代码，梳理下可能的原因和解决办法：

1. 先理清数据的来源与加载时机 #

从代码看，你用Redux的connect获取了chatmsg，但render里却遍历了this.state.msg——这两个数据明显没关联上。而且getMsgList应该是异步请求的Action吧？组件第一次渲染时，Redux里的chatmsg还没拿到后端返回的数据，大概率是null或空数组，你又没把chatmsg同步到state.msg里，自然map的时候拿不到有效数据。

解决思路：

• 优先直接遍历Redux里的chatmsg（推荐，减少状态冗余）；
• 若坚持用this.state.msg，需在组件挂载时调用getMsgList，并在状态更新时同步chatmsg到state.msg。

2. 必须给数组加空值防护 #

不管遍历哪个数组，都要先判断它是否存在，避免空值调用map导致报错。两种常用写法：

// 用ES6可选链语法（简洁）
{ chatmsg?.map(v => <p key={v._id}>{v.content}</p>) }

// 传统短路运算兜底空数组（兼容旧环境）
{ (chatmsg || []).map(v => <p key={v._id}>{v.content}</p>) }

3. 确保Redux异步Action正确执行 #

你需要在组件挂载时触发getMsgList拉取消息列表，比如在componentDidMount里调用：

componentDidMount() {
  this.props.getMsgList();
}

同时检查Redux的Reducer是否正确处理了getMsgList返回的Action，把消息列表正确赋值给state.chat.chatmsg——如果Reducer处理错误，chatmsg永远是空的，自然没法遍历。

修改后的代码示例 #

/*from chat.js */
@connect(state=>state, {getMsgList,sendMsg,recvMsg})
class Chat extends React.Component{
  constructor(props){
    super(props)
    this.state = { text:'' } // 去掉冗余的msg状态，直接用Redux的chatmsg
  }

  componentDidMount() {
    // 组件挂载时拉取消息列表
    this.props.getMsgList();
  }

  render(){
    // 解构chat时加空对象兜底，避免chat为null时解构报错
    const {chatmsg} = this.props.chat || {};
    console.log(chatmsg)
    return(
      <div>
        {/* 空值防护后再执行map */}
        { chatmsg?.map(v=>{
          return(<p key={v._id}>{v.content}</p>)
        }) }
        <div className='stick-footer'>
          <List>
            <InputItem placeholder='please input' value={this.state.text} />
          </List>
        </div>
      </div>
    )
  }
}

最后排查小Tips #

• 打开浏览器控制台，看console.log(chatmsg)的输出：是一开始null后来有值，还是一直null？如果一直null，那就是Redux的Action或Reducer有问题；
• 检查getMsgList的异步请求是否成功，有没有拿到正确的消息数据；
• 若坚持用this.state.msg，可在componentDidUpdate里监听chatmsg变化，同步到state：

componentDidUpdate(prevProps) {
  if (prevProps.chat.chatmsg !== this.props.chat.chatmsg) {
    this.setState({ msg: this.props.chat.chatmsg });
  }
}

内容的提问来源于stack exchange，提问作者Alen