Question

我是新来的反应者。
我有3个主要类别，即JSON文件中的早餐，饮料和甜点。
我想将其类别代码作为参数/ props传递给主要组件，并且基于传递的代码，它应该呈现该类别下的相应产品，该产品再次来自JSON文件。

因此，总共我有4个JSON。 1个类别，1个早餐菜单，1个饮料菜单，1个甜点菜单。

下面是我的代码：

class ProductList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            data2: [],
        };
    }

    componentDidMount() {
        fetch('http://vendor.com:8080/products/BREAKFAST')
            .then((Response) => Response.json())
            .then((findresponse) => {
                this.setState({
                    data2: findresponse
                })
            })
    }

    renderProducts(categoryCode) {
        return (
            this.state.data2.map((p) => {
                return (
                    <Col key={p.id}>
                        <Breakfast /Drinks/Dessert product={p} />
                        </Col>
                );
            })
        );
    }
    listOfCategories() {
        fetch('http://vendordt.com:8081/category')
            .then((Response) => Response.json())
            .then((findresponse) => {
                this.setState({
                    data: findresponse
                })

            })
    }
    renderCategory() {
        this.listofCategory();
        return (
            this.state.data.map((p) => {
                return (
                    <Col key={p.id}>
                        <Category product={p} />
                    </Col>
                );
            })
        );
    }
    render() {
        return (
            <div className="container-fluid">
                {this.renderCategory()}
            </div>
        );
    }
}

export default ProductList;

和

class Category extends React.Component {
    render() {
        return (
            <div>
                <Button key={this.props.product.id} style={{ color: 'grey', radius: '5px', width: '90px' }}>
                    {this.props.product.title}
                </Button>
            </div>
        );
    }
}

export default Category;

Answer 1

未经测试，并且不知道JSON的样子

class ProductList extends React.Components {
    constructor(props) {
        super(props);

        this.state = {
            categories: {}
        };
    }

    componentDidMount() {
        fetch('http://vendordt.com:8081/category')
        .then((Response) => {
            this.setState({
                categories: Response.json()
            });
        })
        .catch(err => console.error);
    }

    render() {
        return(
            <div className="container-fluid">
                {this.state.categories.map(cat => {
                    <Catergory category={cat.categoryCode} />
                })};
            </div>
        );
    }
}

export default ProductList;

和

class Category extends React.Component {

    constructor(props){
        super(props);

        this.state = {
            products = {}
        };
    }

    componentDidMount() {
        fetch('http://vendor.com:8080/products/' + this.props.category)
        .then((Response) => {
            this.setState({
                products: Response.json()
            });
        })
        .catch(err => console.error);
    }

    render() {
        return(
            <div>
                {this.state.products.map( product => (
                    <Button key={product.id} style={{ color: 'grey', radius: '5px', width: '90px' }}>
                        {product.title}
                    </Button>
                ))}
            </div>
        );
    }
}

export default Category;

将密钥从组件发送到React JS中的另一个组件

1 个答案: