javascript - TypeError：使用 defaultProps 后无法将 undefined 转换为对象

问题描述

我想测试一个 defaultProps 功能（当缺少一个道具时，它可能是处理错误），但是在单击按钮后我得到了一个奇怪的错误： TypeError: can't convert undefined to object

一切都很好，但我想知道为什么！

数据.js：

export default [
{
    name: "tiba",
    hp: 87,
    weight: 1,
    price: 140_000_000,
    oils: ["psf", "dex2"],

},
{
    name: "pride",
    hp: 78,
    weight: 0.800,
    oils: ["behran"],
    price: 120_000_000,
    additional: {
        note: "is a simple car that so far provided",
        link: "sdsdcs"
    }
},
{
    name: "sina",
    hp: 80,
    weight: 1,
    price: 150_000_000,
},]

从数据组件向卡片组件 App.js 发送数据：

import './App.css';
import React from "react"
import data from "../../data.js"
import CarCard from "../CarCard/CarCard.js"

function App() {


return (
    <div className="App">
      {
        data.map((item, index) =>
          <CarCard key={index} {...item} showAdditional={() => showAdditional(item.additional)} />
        )
      }
    </div>
  );
}

function showAdditional(additional) {
  const alertInformation = Object.entries(additional)
    .map(information => `${information[0]}: ${information[1]}`)
    .join('\n');
  alert(alertInformation);
}
export default App;

汽车组件显示数据 CarCard.js：

import React from "react"
import PropTypes from "prop-types"
import "./CarCard.css"

export default function CarCard({
    name,
    hp,
    weight,
    price,
    additional,
    showAdditional
}) {
    return (
        <div className="card-wrapper">
            <h1>{name}</h1>
            <h3>{hp} HP</h3>
            <h4>{weight} KG</h4>
            <h5>{price.toLocaleString()} $</h5>
            <button onClick={() => showAdditional(additional)}>Show Alert</button>
        </div>
    )
}

CarCard.propTypes = {
    additional: PropTypes.shape({
        note: PropTypes.string,
        link: PropTypes.string
    }),
    name: PropTypes.string.isRequired,
    hp: PropTypes.number.isRequired,
    weight: PropTypes.number.isRequired,
    price: PropTypes.number.isRequired,
    showAdditional: PropTypes.func.isRequired,
    oils: PropTypes.arrayOf(PropTypes.string)
}

CarCard.defaultProps = {
    additional: {
        note: "no ",
        link: "ds"
    }
}

标签： javascriptreactjs

javascript - TypeError：使用 defaultProps 后无法将 undefined 转换为对象

问题描述

解决方案

推荐阅读