📝金ミンジェDay(46)72日目WE MOTIVATION DIARY

- TODAY I LEARN ERROR 🦠

今日発生したエラーコード

1> Warning: Each child in a list should have a unique "key" prop.2> Warning: ProductCard: 'key' is not a prop. Trying to access it will result in undefined being returned.

- HOW TO FIX MY ERROR 💊

KEYWORDはERRORを解決した🔑

unique "key" prop🗝-prorsは、マッピング部分のトップタグにキーを移動し、キー={product.id}にキーを移動します.

Warning: ProductCard: 'key' is not a prop.-propsは非鍵で渡され、サブコンポーネントがkey={productKey}を受信すると、prorsに鍵を渡すエラーが発生します.

したがってkey propsmapメソッドは、重複するトップレベルのラベルに「のみ」を転送するだけでエラーを解決します.

producList 컴포넌트

<script>
render() {
    const { productsData } = this.state;
    return (
      <div className='ProductList'>
        {productsData.map(product => {
          return (
            <ProductCard
              key={product.id}
              productSubImg={product.subImg}
              productImg={product.img}
              productName={product.name}
              productPrice={product.price}
            />
          );
        })}
      </div>
    );
  }
</script>

productCard 컴포넌트

<script>
render() {
    const { productSubImg, productImg, productName, productPrice, productKey } =
      this.props;
    return (
      <div className='ProductCard' key={productKey}>
        <img className='productImage' src={productImg} alt='' />
        <ProductOtherColorCard subImg={productSubImg} />
        <h2 className='productName'>{productName}</h2>
        <h2 className='productPrice'>{productPrice}</h2>
      </div>
    );
  }
</script>

レイアウトの解析

ProductListページフルフレーム

最大構成はnav+ホーム+フッターです.

私が担当しているコンポーネントは、メインコンテンツ領域であり、中間領域に位置しています.

ProductListページのメインコンテンツ構成部品レイアウト

以前游んだ回复モンスターを捕まえるカードと似ている.

ProductCard要素は、ProductMainImage+ProductOtherColor+ProductInfomataionに分けられます.

ProductList素子、ProductCard素子およびProductOtherColor素子

写真のように、真ん中に空いている領域には同じ製品の異なる色の画像が含まれるため、prodcutotherColor素子として単独で配置される.

-知らない

listページがコンポーネントの作成を担当する場合、fetchメソッドでネックデータを送信し、jsonを使用してネックデータを作成

fetchメソッドによりkeyにエラーが発生し、エレメントの上部にキー値を与えるべきかサブエレメントを与えるべきか分からない.

-学んだこと

-json data🔑は、キーとキーの値としてオブジェクトに入り、渡すデータとしてキーの値を配列内のキーとキーの値に渡します.key prors🗝は一意で、トップレベルのラベルしか与えられません.

-うまくやっている点と改善すべき点

まじめに勉強키워드 A를正式文書をまじめに読む~A!ほめて!(よくできた)

寝るのが遅くて、朝は回顧録を書いて、明日は早く寝る前に必ず回顧録を書いて寝ます~

-目標および締切日:2021～10-03

1プロジェクトスケルトン2を作成します.ウィバークスと共に6週目の回顧録を記録