我有一个名为 PersonCard 的 React 组件：

class PersonCard extends Component {

  constructor(props) {
    super(props);
    console.log(JSON.stringify(props));
    this.state = props;
  }

  render() {
    return (
      <div>
            <MuiThemeProvider muiTheme={Mui} >
                <Card>
                    <CardHeader
                    title={this.props.firstName}
                    />
                </Card>
            </MuiThemeProvider>
      </div>
    );
  }
}

export default PersonCard;

视图有多个 PersonCard，它们从其父组件 SearchResults 中的数组映射，如下所示：

class SearchResults extends Component {

    constructor() {
        super()
        this.state = {
          data: [],
        }
      }
    componentDidMount() {
        return fetch('http://localhost:3005/persons')
          .then((response) => response.json())
          .then((responseJson) => {
            this.setState({
              data:responseJson
            })
          })
        }
    render() {
        return (
            <div>
            {
              this.state.data.map( (person)=>
                <PersonCard key={person.id} personProp = {person} />
              )

            }
          </div>
        )
    }
}

export default SearchResults;

构造函数中的记录器正确显示了 person 对象及其属性，因此它应该在那里。

但是 props 值（this.props.firstName）没有显示在 render 方法中，因为它们在视图上呈现为“未定义”。为什么？