无法读取组件中的对象，React

Question

我在读取 React 组件中的对象值时遇到问题。我正在尝试读取和写入“recordCount”，但我收到错误消息：

TypeError：无法读取未定义的属性“recordCount”。

知道为什么会抛出错误吗？

import React, { Component } from 'react';

export class UrunlerComponentList extends Component {
    displayName = UrunlerComponentList.name

    constructor(props) {
        super(props);
        this.state = { urunler_: [], recordCount: 0, loading: true };


    }

    componentDidMount() {
        fetch('http://localhost:55992/api/search/arama?q=&PageIndex=1')
            .then(response => response.json())
            .then(data => {
                this.setState({ urunler_: data.products, recordCount: data.RecordCount, loading: false });
            });
    }

    static renderUrunlerTable(urunler_) {
        return (
            <div>
                <header className="mb-3">
                    <div className="form-inline">
                        <strong className="mr-md-auto"> {recordCount} Items found </strong>
                    </div>
                </header>

                {
                    urunler_.map(urun =>
                        <article className="card card-product-list">
                                                ...............................
                                                ...............................
                                                ...............................
                        </article>
                    )}
            </div>


        );
    }

    render() {
        let contents = this.state.loading
            ? <p><em>Loading...</em></p>
            : UrunlerComponentList.renderUrunlerTable(this.state.urunler_);

        return (
            <div>
                {contents}
            </div>
        );
    }
}

Answer 1

请在 componentDidMount() 中移动您的 fetch 调用（推荐） 要么 如果你想在构造函数中获取使用 --> this.state = { urunler_: data.products, recordCount: data.RecordCount, loading: false }

Answer 2

由于您使用的是静态方法，因此 this 不会引用组件，因此 this.state 是未定义的。

您可以将方法设置为非静态方法，并且该方法应该可以工作。另外，请确保如果您不使用箭头函数，则需要在构造函数中绑定方法。

import React, { Component } from 'react';

export class UrunlerComponentList extends Component {
    displayName = UrunlerComponentList.name

    constructor(props) {
        super(props);
        this.state = { urunler_: [], recordCount: 0, loading: true };
        this.renderUrunlerTable = this.renderUrunlerTable.bind(this);

    }

    componentDidMount() {
        fetch('http://localhost:55992/api/search/arama?q=&PageIndex=1')
            .then(response => response.json())
            .then(data => {
                this.setState({ urunler_: data.products, recordCount: data.RecordCount, loading: false });
            });
    }

    renderUrunlerTable(urunler_) {
        return (
            <div>
                <header className="mb-3">
                    <div className="form-inline">
                        <strong className="mr-md-auto"> {this.state.recordCount} Items found </strong>
                    </div>
                </header>

                {
                    urunler_.map(urun =>
                        <article className="card card-product-list">
                                                ...............................
                                                ...............................
                                                ...............................
                        </article>
                    )}
            </div>


        );
    }

    render() {
        let contents = this.state.loading
            ? <p><em>Loading...</em></p>
            : this.renderUrunlerTable(this.state.urunler_);

        return (
            <div>
                {contents}
            </div>
        );
    }
}

使用此代码 sn-p 代替您的代码。