Question

我使用模式容器/代表组件我有CardContainer组件从服务器获取数据并将其传递给Card组件
容器组件：

class CardContainer extends Component {
    state = {
        'card': null
    }
    componentDidMount() {
        fetch(`${BASEURL}/api/cards/${this.props.params._id}/`)
            .then(res => res.json())
            .then(card => this.setState({'card': card}))
   }

    render() {
        return <CardDetail card={this.state.card} />
   }

代表性组成部分：

class CardDetail extends Component {
    render() {
        return (
            <div>
                {this.props.card._id}
            </div>
        )
    }
}

在这种情况下，我有一个错误：

未捕获的TypeError：无法读取null的属性'_id'

因此，在componentDidMount之前调用的孩子的渲染方法但是当我将无状态函数组件传递给子节点时，一切正常：

const FunctionChild = props => <h1>{props._id}</h1>

class CardDetail extends Component {
    render() {
        return (
            <div>
                <FunctionChild {...this.props.card} />
            </div>
        )
    }
}

我在组件render和componentDidMount方法中使用console.log来了解方法解析：

装载容器
装载孩子
装载功能孩子
DidMount容器方法

所以componentDidMount仍称为最后，但一切正常。请有人解释我错过了什么。

Answer 1

原因是，最初您将卡片值定义为null，并访问了id的值，这就是它抛出错误的原因：

无法访问null
的属性ID

因为您要从api获取数据，所以asynchronous call为return并需要时间null数据，直到您没有获得数据，卡的值将为{}。

解决此问题的一种方法是，使用null而不是class CardContainer extends Component { state = { 'card': {} //change this } componentDidMount() { fetch(`${BASEURL}/api/cards/${this.props.params._id}/`) .then(res => res.json()) .then(card => this.setState({'card': card})) } render() { return <CardDetail card={this.state.card} /> }初始化卡片，如下所示：

class CardDetail extends Component {
    render() {
        return (
            <div>
                {this.props.card && this.props.card._id}
            </div>
        )
    }
}

或者在访问id值之前将检查放在子组件中，如下所示：

href

我不明白组件的安装方式

1 个答案: