主页 / 问题 / 1242726
Accepted
Alex
Asked:2022-02-11 18:55:18 +0000 UTC2022-02-11 18:55:18 +0000 UTC

在 react-redux 中初始化来自北方的数据请求

  • 772

用户第一次进入页面时，需要渲染数据，据我了解，获取初始数据的最佳位置是在根 App 组件描述之前的查询中。

import fetchIndexData from "./api/axios/fetchIndexData";
store.dispatch(fetchIndexData());

export default class App extends Component {
    render() {
        return (
           <Provider store={store}>
              <... тут роутинг и все такое>
           </Provider>
        )
    }
}

然后，理论上，数据进入 Promo 组件，它首先显示并依赖于这些数据，循环显示它们（带有产品的数组）。但是使用这种方法，服务器的响应仍然没有时间到达，并且组件第一次给出了关于 undefined in props 的错误。我用 defaultProps 存根解决了这个问题，组件空闲一个空数组，渲染一个半空的组件一秒钟，然后来自服务器和普通道具的响应 - 它们已经显示在一个循环中。

class Promo extends Component {

    static defaultProps = {
        initialListOfProducts: { data: [] }
    };

    render() {

        const { data } = this.props.initialListOfProducts;
        return (
            <section>
                    <ul>
                        {data.map(item => {
                            return (
                                <ProductCard key={item.id} item={item}/>
                            )
                        })}
                    </ul>
            </section>
        )
    }
}


function mapStateToProps(state) {
    return {
        initialListOfProducts: state.db.initialListOfProducts,
    }
}

function mapDispatchToProps(dispatch) {
    return {
        fetchIndexData: () => {
            dispatch(api.fetchIndexData());
        },
    }
}


export default connect(mapStateToProps, mapDispatchToProps)(Promo);

问题：有没有办法在网站第一次渲染时更方便地从服务器接收数据，以便不执行第一个异步请求，而是立即获得初始化数据？还是只有这样一个选项或只是某种微调器可以显示？

reactjs

1 个回答

  1. Best Answer

    您可以在没有数据时签入渲染并返回 null。该组件将不会被渲染。

    从服务器接收数据时，它们将根据您的需要显示。

    class Promo extends Component {

    static defaultProps = {
        products: []
    };

    render() {
        if (!(this.props.products && this.props.products.length)) {
            return null;
        }

        return (
            <section>
                    <ul>
                        {this.props.products.map(item => {
                            return (
                                <ProductCard key={item.id} item={item}/>
                            )
                        })}
                    </ul>
            </section>
        )
    }
}


function mapStateToProps(state) {
    return {
        products: state.db.products,
    }
}

    不要将数据传递给它不使用的组件，否则它将无用地重新渲染。

    • 1

相关问题