Pracował nad reakcją JS Project. Ale podczas przekazywania rekwizytów na komponent dziecka Uzyskiwanie błędu props.map nie jest funkcją.

rodzicalComponent: -

componentDidMount = () => {
    fetch('api/dashboard/dashboarddata').then(response => response.json()).then((data: Dashboard) => {
      this.setState({
        category: data.categories,
        banners: data.banners,
        loading: false
      });
    });
  }

Przechodzące rekwizyty

 {
      this.state.loading ? <ContentLoader /> : <div><Category {...this.state.category} /> <Banner {...this.state.banners} /> </div>
 }

Oto obiekt stanowy po odpowiedzi API: -

enter image description here

Ale w komponencie dziecięcych otrzymywa błąd

enter image description here

Komponent podrzędny:

const Category = (props: brandcategory[]) => {
   
return (
    <div className="section category">
        <div className="container-fluid">
            <div className="row">
                <div className="col-md-12">
                    <div className="section-title">
                        <h4 className="title">Select interested categories</h4>
                        <div className="section-nav">
                            <a className="primary-btn cta-btn" href="#">View All</a>
                        </div>
                    </div>
                </div>
                <div className="col-md-12">
                    <div className="row">
                        <div className="col-md-10">
                            <div className="products-tabs">
                                <Slider {...sliderconfig.productSlider} className="products-slick" data-nav="#slick-nav-2">
                                    {
                                        props.map((c: brandcategory) => <CategoryCard key={c.id} {...c} />)
                                    }
                                </Slider>
                            </div>
                        </div>
                        <div className="col-md-2 text-center">
                            <div className="btn-container">
                                <a href="#" className="btn btn-3">Get Started</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
)
}

Odbieranie rekwizytów w komponencie dziecka w ten sposób: -

enter image description here

0
Ghanshyam Singh 17 kwiecień 2021, 09:23

3 odpowiedzi

Najlepsza odpowiedź

Kwestia

props jest obiektem, prawdopodobnie oznaczasz, że mapujesz na konkretnym RIP, który minął, jak props.category.map. W rzeczywistości próbujesz rozłożyć całą tablicę this.state.category do rekwizytów.

Rozwiązanie

Pass this.state.category array jako rekwizyty.

<Category category={this.state.category} />

Następnie w Category dostęp do komponentu props.category do mapowania.

props.category.map((c: brandcategory) => <CategoryCard key={c.id} {...c} />)

Nie jestem tak znany z maszynamiczkami, jak mogłem / powinien być, ale jestem pewien, że będziesz musiał zaktualizować podpis składowy. Być może coś takiego:

const Category = ({ category: brandcategory[] }) => { ....

W tym przypadku category jest już zniszczenia z obiektu props, więc nie będziesz musiał uzyskać dostępu jako props.category.map, ale raczej category.map.

category.map((c: brandcategory) => <CategoryCard key={c.id} {...c} />)
3
Drew Reese 17 kwiecień 2021, 06:47

Ten błąd występuje, ponieważ dane nie są tablicą. So .map () Funkcja działa tylko z tablicami. Najpierw musisz potwierdzić typ danych. A także musisz przekształcić swoje dane w tablicę.

1
lucky shukla 17 kwiecień 2021, 06:44

Dostarczyłeś tablicę z operatorami rozprzestrzeniania, aby reagować komponentowi, który musi być obiektowy jako klucz, musi istnieć para wartości. Patrz poniżej przykłady: -

const Category = ({categories}) => {
  return (
    <ul>
    {categories.map((category, index) => (
      <li key={index}>{category.name}</li>
    ))}
    </ul>
  );
}

const App = () => {
  const categories = [{name: 'Apple'}, {name: 'Ball'}];
  return <Category categories={categories} />;
}

const App2 = () => {
  const catProps = {categories: [{name: 'Apple 2'}, {name: 'Ball 2'}]};
  return <Category {...catProps} />;
}

ReactDOM.render(
  <App/>,
  document.getElementById('root')
);

ReactDOM.render(
  <App2/>,
  document.getElementById('root2')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<h1>Example 1</h1>
<div id="root"></div>

<h1>Example 2</h1>
<div id="root2"></div>
2
Suson Waiba 17 kwiecień 2021, 06:41