Question

我正在尝试从MongoDB文档中呈现数据，但是我无法弄清楚为什么当它是一个异步函数并且正在等待它时，状态是不确定的。

export default class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            offers: null
        };

        this.getOffers = this.getOffers.bind(this);
        this.renderOffer = this.renderOffer.bind(this);
    }

    componentDidMount() {
        if(!this.state.offers) {
            this.getOffers();
        }
    }

    async getOffers() {
        let res = await offerService.getAll();
        this.setState({ offers: res });
    }

    renderOffer(product) {
        return (
            <li key={product._id} className="list__item product">
                <h3 className="product__name">{product.title}</h3>
            </li>
        );
    };

    render() {
        return (
            <div className="App">
                <Nav />

                <ul className="list">
                    {(this.state.offers && this.state.offers.length > 0) ? (
                        this.state.offers.map(offer => this.renderOffer(this.state.offer))
                    ) : (
                        <p>Loading...</p>
                    )}
                </ul>
            </div>
        );
    }
}

无论我何时加载页面，它都会返回TypeError: Cannot read property '_id' of undefined，尽管事实是如果我将res的输出记录在getOffers()中，则会显示数据。为什么会这样？

Answer 1

问题出在您的map通话中：

this.state.offers.map(offer => this.renderOffer(this.state.offer))

您正尝试使用未定义的变量this.state.offer而不是offer映射变量。您真正想要的是：

this.state.offers.map(offer => this.renderOffer(offer))

来自异步方法的渲染数据未定义

1 个答案: