Question

我在GatsbyJS（基于React的静态站点生成器）构建的网站中有3个组件。

一个组件从API提供数据，然后通过render prop模式将其向下传递到包装的组件中。

class FetchData extends React.Component {
    state = {
        contactData: {
            firstName: "",
            lastName: "",
            email: "",
        },
        isLoaded: false,
    };

    componentDidMount() {
        const { email } = this.props;

        fetch("some_api_endpoint")
            .then(res => res.json())
            .then(({ firstName, lastName, email }) => {
                this.setState({
                    contactData: {
                        firstName,
                        lastName,
                        email,
                    },
                    isLoaded: true
                });
        });

        // Fallback if API fails
        setTimeout(() => {
            this.setState({
                isLoaded: true,
            });
        }, 1500);
    }

    render() {
        return this.props.children(this.state);
    }
}

InnerForm依靠isLoaded道具来确定是显示表单还是加载图标。

class OuterForm extends React.Component {
    render() {
        return (
            <FetchData>
                {({ contactData, isLoaded }) => (
                    <InnerForm contactData={contactData} isLoaded={isLoaded} />
                )}
            </FetchData>
        )
    }
}

class InnerForm extends React.Component {
    render() {
        const { isLoaded, contactData } = this.props;

        return isLoaded 
            ? <Form contactData={contactData} />)
            : <LoadingIcon />;
    }
}

问题是当网站是静态构建的，并且在浏览器中禁用了JS时，页面被加载图标所卡住，并且表单从不显示。

我认为这与Gatsby有关，它使用每个组件接收的初始prop和state值来构建站点，在这种情况下，它静态呈现LoadingIcon而不是表单，因为isLoading为initialized为错误。

如何确保禁用JS时呈现表单而不必遵循将FetchData组件状态初始化为isLoading: true的棘手选项？

初始化值，以便在禁用JavaScript时显示组件

0 个答案: