如何通过Redux connect传递Props？传递组件时遇属性未定义错误

嘿，我来帮你捋清楚这个报错的问题，先看你给出的代码片段，首先就有个很明显的小坑——函数组件不能用this.props！函数组件的props是直接作为参数传入的，不是通过this访问的，这会直接导致this是undefined，进而读取props的时候就报错了（虽然你代码里写的是imageSourceUrl，但错误提示是circularImage，应该是你实际代码里的对应字段，核心原因是一样的）。

接下来一步步给你修正：

1. 先把函数组件的props访问方式改对 #

把CircularImage改成接收props参数的形式，顺便给图片加上圆形样式，还有注意网络图片的写法：

// CircularImage.js
import React from 'react'
import PropTypes from 'prop-types'
import { Image } from 'react-native'

// 函数组件直接接收props参数
function CircularImage (props) { 
  return (
    <Image 
      // 划重点：网络图片必须用{ uri: 地址字符串 }的格式！本地图片才用require
      source={{ uri: props.imageSourceUrl }} 
      // 加borderRadius: 宽高的一半，实现圆形效果
      style={{width: 100, height: 100, borderRadius: 50}} 
    />
  )
}

// 完善propTypes，明确要求传入字符串类型的图片地址
CircularImage.propTypes = {
  imageSourceUrl: PropTypes.string.isRequired 
}

export default CircularImage

2. 确保Redux的connect映射没出错 #

假设你是要从Redux store里取circularImage这个字段（对应错误提示的属性），一定要正确配置mapStateToProps，把store里的字段映射到组件的props上：

// 比如在你的容器组件里，或者直接给CircularImage加connect
import { connect } from 'react-redux'
import CircularImage from './CircularImage'

// 把store里的state映射成组件的props
const mapStateToProps = (state) => {
  return {
    // 这里要替换成你实际的reducer名称，确保能取到circularImage字段
    imageSourceUrl: state.yourReducerName.circularImage 
  }
}

// 用connect把组件和store关联起来
export default connect(mapStateToProps)(CircularImage)

3. 额外的防坑提示 #

• 如果store里的circularImage一开始是undefined，建议给组件加个默认值或者条件渲染，避免加载时报错：

function CircularImage (props) {
  // 没拿到图片地址时，返回占位或者空
  if (!props.imageSourceUrl) {
    return null 
  }
  return (
    <Image 
      source={{ uri: props.imageSourceUrl }} 
      style={{width: 100, height: 100, borderRadius: 50}} 
    />
  )
}

// 或者给组件设置默认props
CircularImage.defaultProps = {
  imageSourceUrl: 'https://你的默认占位图地址'
}

• 还要确认你的Redux store已经正确配置，reducer的初始state里已经初始化了circularImage字段（比如设为空字符串），不然刚加载时store里这个值也是undefined，也会触发报错。

这样调整之后，应该就能解决你遇到的TypeError问题啦～

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