0

Есть 2 компонента в компоненте родителе определяется массив данных и передаётся в дочерний компонент, дочерний компонент не отрисовывает полученные от родителя props.

Компонент родитель:
const MyComponent = () => {
const data = [
            {
                mens: [
                    {
                        category: "casuals",
                        subcategories: ["Jackets", "Hoodies & Sweatshirts", "Polo Shirts", "Sportswear", "Trousers & Chinos", "T-Shirts"]
                    },
                    {
                        category: "FORMAL",
                        subcategories: ["Jackets", "Shirts", "Suits", "Trousers"]
                    }
                ]

            },
 {
                womens: [
                    {
                        category: "casuals",
                        subcategories: ["Jackets", "Hoodies & Sweatshirts", "Polo Shirts", "Sportswear", "Trousers & Chinos", "T-Shirts"]
                    },
                    {
                        category: "FORMAL",
                        subcategories: ["Jackets", "Shirts", "Suits", "Trousers"]
                    }
                ]

            }
    ];
const [mens, womens] = [...data];

return (
<div>
   <Categories data={mens}/>
   <Categories data={womens}/>
</div>
)
}
export default MyComponent 
Дочерний компонент
const Categories = (props) => {

    const [columnArr, setColumnArr] = useState([]);



    useEffect(()=>{
        propsToArr();
    },[]);


    const propsToArr = () => {
        const {data} = props;
        const arr = [];
        for (let key in data) {
            for (let jKey in data[key])
                arr.push(data[key][jKey])
        }
        setColumnArr([...arr]);
    };


    const renderLi = (item, key) => {
        return (
            <li className='categories__item' key={key}><Link to='/'>{item}</Link></li>
        )
    };

    const renderColumn = () => {
          columnArr.map((item, iKey) => {
            return (
                <div className='categories__column' key={iKey}>
                    <div><label>{item.category}</label></div>
                    <ul className='categories__list'>
                        {item.subcategories.map((item, jKey) => {
                            renderLi(item, jKey)
                        })}
                    </ul>
                </div>
            )
        })
    };


    return (
        <div className='categories'>
            <div className='categories__grid'>

                
                {
                      renderColumn()
                }
                
             </div>
         </div>
    )
};


export default Categories;

1 ответ 1

0

Нашёл решение. Проблема в renderColumn(). в JSX необходимо использовать

{
      columnArr.map((item, key) => {.....}
}
1
  • Ну или добавить return в функцию renderColumn - return columnArr.map((item, iKey) => { ... }
    – www3b
    25 сен 2020 в 10:35

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.