为什么道具呈现为未定义？

Question

我有一个名为 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;

该视图有多个 PersonCards，它们从其父组件 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;

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

但是道具值 (this.props.firstName) 没有显示在渲染方法中，因为它们在视图中被渲染为 "undefined"。为什么？

Answer 1

您没有在此处定义名为 firstName 的道具：

<PersonCard key={person.id} personProp = {person} />

也许您打算通过 this.props.personProp.firstname 访问它？

Answer 2

在您的代码中，您将 "key" 和 "personProp" 道具传递给 "PersonCard" 组件。因此，在 "PersonCard" 组件的渲染函数中，您可以通过 "this.pops.key" 和 "this.props.personProp".

访问这些道具

因此，如果您的 personProp 包含 firstName，那么您将能够通过 "this.prps.personProp.firstName" 访问它。所以你应该试试下面的代码

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.personProp.firstName}
                />
            </Card>
        </MuiThemeProvider>
      </div>
   );
  }
}

export default PersonCard;

为什么道具呈现为未定义？

Why props render as undefined?

javascript

reactjs

react-props