मेरे पास प्रतिक्रिया में सरल कार्यात्मक घटक है

import React from 'react';    
import styled from 'styled-components';
import IconButton from '@material-ui/core/IconButton';
import AddShoppingCartIcon from '@material-ui/icons/AddShoppingCart';
import RemoveShoppingCartIcon from '@material-ui/icons/RemoveShoppingCart';

const Wrapper = styled.section`
  padding: 1em;
  margin: 0 auto;
  width: 400px;
`;

const IngredientRow = styled.div`
    display: flex;
    margin: 5px 0;
    width: 40%;
    margin: 0 auto;
    margin-bottom: 10px;
    justify-content: space-between;
    align-items: center;
`

const IngredientSelector = (props) => {

    const Ingredient = (ingredient) => {
        return (
            <IngredientRow key={ingredient.id}>
                <span>
                    <IconButton color="primary" aria-label="add to shopping cart">
                        <RemoveShoppingCartIcon />
                    </IconButton>
                </span>
                <h4>a</h4>
                <span>
                    <IconButton color="primary" aria-label="add to shopping cart">
                        <AddShoppingCartIcon />
                    </IconButton>
                </span>
            </IngredientRow>
        )
    }


    return (
        <Wrapper>
            <h2>Select the Burger Ingredients</h2>
            {
                props.ingredients.map(ingredient => {
                    <Ingredient ingredient={ingredient} />
                })
            }



        </Wrapper>
    )
}

export default IngredientSelector;

यह काम नहीं कर रहा है और कंसोल में त्रुटि दे रहा है। सुनिश्चित नहीं है कि काम क्यों नहीं कर रहा है। कृपया मदद करे।

-1
raju 2 मार्च 2020, 06:22
2
क्या मैं त्रुटि लॉग देख सकता हूँ?
 – 
Khanh Le Tran
2 मार्च 2020, 06:29

3 जवाब

घटक फ़ंक्शन को सामग्री चयनकर्ता के बाहर ले जाने का प्रयास करें और घटक के प्रोप में विनाशकारी वस्तु जोड़ें

const Ingredient = ({ingredient}) => {
    return (
        <IngredientRow key={ingredient.id}>
            <span>
                <IconButton color="primary" aria-label="add to shopping cart">
                    <RemoveShoppingCartIcon />
                </IconButton>
            </span>
            <h4>a</h4>
            <span>
                <IconButton color="primary" aria-label="add to shopping cart">
                    <AddShoppingCartIcon />
                </IconButton>
            </span>
        </IngredientRow>
    )
}



const IngredientSelector = (props) => {
    return (
        <Wrapper>
            <h2>Select the Burger Ingredients</h2>
            {props.ingredients.map(ingredient => {
                    <Ingredient ingredient={ingredient} />
                })
            }
        </Wrapper>
    )
}
0
david snyder 2 मार्च 2020, 07:18

वस्तु "संघटक" में आपको "props.ingredient.id" का उपयोग करके अपने मामले में "ingredient.indgredient.id" का उपयोग करना चाहिए। क्योंकि कार्यात्मक घटक "संघटक" में। पारित चर घटक है। साथ ही, मानचित्र फ़ंक्शन में कुंजी को वापसी में नहीं दिया जाना चाहिए। तो, आपका मौजूदा कोड दिखेगा।

import React from 'react';    
import styled from 'styled-components';
import IconButton from '@material-ui/core/IconButton';
import AddShoppingCartIcon from '@material-ui/icons/AddShoppingCart';
import RemoveShoppingCartIcon from '@material-ui/icons/RemoveShoppingCart';

const Wrapper = styled.section`
  padding: 1em;
  margin: 0 auto;
  width: 400px;
`;

const IngredientRow = styled.div`
    display: flex;
    margin: 5px 0;
    width: 40%;
    margin: 0 auto;
    margin-bottom: 10px;
    justify-content: space-between;
    align-items: center;
`

const IngredientSelector = (props) => {

    const Ingredient = (ingredient) => { {/* change it props. But, its your preference*/}
        return (
            <IngredientRow key={ingredient.ingredient.id}> {/* Because the function component receives variable name ingredient`enter code here` */}
                <span>
                    <IconButton color="primary" aria-label="add to shopping cart">
                        <RemoveShoppingCartIcon />
                    </IconButton>
                </span>
                <h4>a</h4>
                <span>
                    <IconButton color="primary" aria-label="add to shopping cart">
                        <AddShoppingCartIcon />
                    </IconButton>
                </span>
            </IngredientRow>
        )
    }


    return (
        <Wrapper>
            <h2>Select the Burger Ingredients</h2>
            {
                props.ingredients.map(ingredient => {
                    <Ingredient ingredient={ingredient} key={ingredient.id}/> {/* Code change here */}
                })
            }



        </Wrapper>
    )
}

export default IngredientSelector;
0
Singhey 2 मार्च 2020, 07:33

ऐसा लगता है कि आप मानचित्र के अंदर डोम वापस करना भूल गए हैं।

और आप ingredient संघटक घटक को एक तर्क के रूप में नहीं एक तर्क के रूप में पारित कर रहे हैं। कार्यात्मक घटक एक तर्क के रूप में सहारा प्राप्त करता है।


import React from 'react';    
import styled from 'styled-components';
import IconButton from '@material-ui/core/IconButton';
import AddShoppingCartIcon from '@material-ui/icons/AddShoppingCart';
import RemoveShoppingCartIcon from '@material-ui/icons/RemoveShoppingCart';

const Wrapper = styled.section`
  padding: 1em;
  margin: 0 auto;
  width: 400px;
`;

const IngredientRow = styled.div`
    display: flex;
    margin: 5px 0;
    width: 40%;
    margin: 0 auto;
    margin-bottom: 10px;
    justify-content: space-between;
    align-items: center;
`

const IngredientSelector = (props) => {

    const Ingredient = ({ingredient}) => { // recieves props
        return (
            <IngredientRow key={ingredient.id}>
                <span>
                    <IconButton color="primary" aria-label="add to shopping cart">
                        <RemoveShoppingCartIcon />
                    </IconButton>
                </span>
                <h4>a</h4>
                <span>
                    <IconButton color="primary" aria-label="add to shopping cart">
                        <AddShoppingCartIcon />
                    </IconButton>
                </span>
            </IngredientRow>
        )
    }


    return (
        <Wrapper>
            <h2>Select the Burger Ingredients</h2>
            {
                props.ingredients.map(ingredient => {
                    return <Ingredient ingredient={ingredient} /> // return the dom
                })
            }



        </Wrapper>
    )
}

export default IngredientSelector;

0
Abhishek 2 मार्च 2020, 08:41