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;

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

但是props值（this.props.firstName）没有在render-method中显示，因为它们在视图上呈现为“undefined”。为什么呢？

Answer 1

你不能在这里定义名为firstName的道具：

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

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

Answer 2

在您的代码中，您将“key”和“personProp”道具传递给“PersonCard”组件。因此，在“PersonCard”组件的render函数中，您可以通过“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;

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

2 个答案: