props.map 不是函数 react.js

Question

一直在做 react js 项目。但是在将 props 传递给子组件时出现错误 props.map is not a function。

父组件：-

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

传递道具

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

这是 API 响应后的状态对象：-

但是在子组件中出现错误

子组件：

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>
)
}

像这样在子组件中接收道具：-

Answer 1

问题

props 是一个对象，您可能打算映射到您传递的 特定 道具，例如 props.category.map。您实际上是在尝试将整个 this.state.category 数组传播到 props 中。

解决方案

将this.state.category 数组作为道具传递。

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

然后在Category组件中访问props.category进行映射。

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

我不太熟悉 Typescript，但我确信您需要更新组件签名。可能类似于以下内容：

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

在这种情况下，category 已经从 props 对象解构，因此您不需要以 props.category.map 的身份访问，而只需以 category.map 的身份访问。

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

Answer 2

您已经为反应组件提供了带有扩展运算符的数组，该组件必须是对象作为键，值对必须存在。请参考以下示例：-

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>

Answer 3

出现此错误是因为您的数据不是数组。所以 .map() 函数只适用于数组。首先，您需要确认您的数据类型。而且您还需要将数据转换为数组。