Question

我正在尝试将此代码重构为功能组件，因此不需要将其包装在Product Consumer中。我在功能组件中不断收到意外错误令牌，无法弄清原因。

这是原始的

           <ProductConsumer>
                {value => {
                  return value.clothing.map(product => {
                    return <Product key={product.id} product={product} />;
                  });
                }}
              </ProductConsumer>

这是功能组件

                          const ProductListComponent = (props) => {
                const [loading, setloading] = useState(true)
            const productConsumer = useContext(ProductContext);

            const { cart } = productConsumer;

            useEffect(() => {


                (async () => {
                    await domLoaded;
                    setTimeout(() => {
                    console.log('DOM is loaded');
                    setLoading(false);
                    console.log(loading)
                    }, 200);
                })();


            }, [domLoaded, loading, params, props.location.pathname]);
                if (loading === false) {
                    return (
                    <React.Fragment>
                    <Slide>
                        <header className="bg py-5 mb0 container-fluid clothing ">
                        <div className="container h-100">
                            <div className="row h-100 align-items-center">
                            <div className="col-lg-12">
                                <h1 className="display-4 text-white mt-5 mb-2 text-center">
                                {props.title}
                                </h1>
                                <p
                                style={props.textStyle}
                                className="lead mb-5 text-white  text-center"
                                >
                                {props.description}
                                </p>
                            </div>
                            </div>
                        </div>
                        </header>

                        <div className="py-0    ">
                        <div className="container">
                            <div className="row">

                            return props.items.productConsumer.map(product => {
                return <Product key={product.id} product={product} />;
            });

                            </div>
                        </div>
                        </div>
                    </Slide>
                    </React.Fragment>
                    )
                }else if (loading === true) {
                return <Spinner />;
                }
            }

            export default withRouter(ProductListComponent)

我决定将value.clothing作为道具传递，以便我可以重用该组件

Answer 1

功能组件的主体只是一个功能，您不需要使用大括号括起来：

function Component(props) {
  return props.items.productConsumer.map(product => {
    return <Product key={product.id} product={product} />;
  });
}

Answer 2

这是正确的答案。

  {props.items.productConsumer.map(product => {
              return <Product key={product.id} product={product} />;
            })}

我正在尝试将此代码重构为功能组件

2 个答案: