[TIL] d+16.5

学習反応の方向性に頭がつかめない.勉強した人がやる.
だから….何も整理することはないので、メモのように全部書くことにしました.

render() {
    const nemo_count = Array.from({ length: this.state.count }, (v, i) => i) //만들어진 배열 요소 하나하나에 인덱스값을 넣어줌
    console.log(nemo_count)
    return (
      <div className="App">
        {nemo_count.map(() => {
          return (<div style={{
            margin: "10px",
            width: "150px",
            height: "150px",
            backgroundColor: "#ddd"
          }}>
            nemo
          </div>)
        })}
      </div>
    )
  }

このように回すと、並んだブロックにユニークな鍵がないというエラーが発生します.
仮想ドームと実際のドームを比較するには、key~という比較値が必要です.
元は、各要素のキーが自動的に入力され、重複を回避します.elementタブでは確認できません(react要素のみ).mapを使用すると、戻るたびにmapが回転して要素->最初に作成した要素と2番目に作成した要素のキーが異なります.

import React from "react";
import './App.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 3
    };
  }

  componentDidMount() {

  }

  render() {
    const nemo_count = Array.from({ length: this.state.count }, (v, i) => i) //만들어진 배열 요소 하나하나에 인덱스값을 넣어줌
    console.log(nemo_count)
    return (
      <div className="App">
        {nemo_count.map((n, i) => {
          return (<div key={i} style={{
            margin: "10px",
            width: "150px",
            height: "150px",
            backgroundColor: "#ddd"
          }}>
            nemo
          </div>)
        })}
      </div>
    )
  }

}

export default App;

このようにmapを変換する際に、要素とインデックスを同時に受信し、インデックス値をkeyに入れると、関数が新しい値を返すたびに同じkeyが返されます.

this.setState()=>stateの関数を変更できます.stateの形態に合致しなければならない.
写真ではディックの形態なので、同じくディックの形態です.

onclickイベントを使用する場合、

写真のように、作り方を変えることができます.
注意:大かっこに{this.addNemo}と表示されている場合は、小かっこを加算して{this.addNemo()}と書きます.この関数はクリックイベントが発生していなくてもすぐに実行されます.今の状況ではcountは無限に上昇し、大量のブロックを生成します!!△やってみましたが、countが上がるにつれて、配列が非常に多くなり、エラーが発生して止まりました.

removeNemoを写真に合成するとcountは負の値に下がり、追加ボタンを押しても一度に追加されません.
条件文の使用

制御countは0を下回らない.
関数形式で再試行!

どうしていつも间违ってるの!!!
=>素子にstateもcountもなく、これはどうなのか、テレビ、、、.

応答フックを使用して、ステータス値を関数要素に使用できます.

へへへ

社長が来て、そんな質問をたくさんしました.
でも質問よりアドバイスが多かったんですよね!!
データ・ストリームを参照します.
useStateのレンダリングは重要なので必ず確認してください!見えなくてもずっと起こる可能性があります5番目の円だけを塗ったのは、そのためかもしれません(状態変化(Status Variation)として再レンダリングすると、マッピングが再回転し、円がリセットされます)
ParseIntを削除できる理由=>整数でなくても、自分で数字として認識して行いますので、不確実性を排除するために最初から整数にします!
反応公式サイトでは、キー値として?indexを使用しないことを推奨します...=>今は大丈夫ですが、これからどうなるかわかりませんが・・・そしてこの場合、バックエンドの唯一のキー値は?与える.<...!
コードが完成したらコメントしてみましょう.
あまりにも悪い時...飛べ……!

    {Circle.map((cur, idx) => {
        return (
            <div className='Circle' key={idx}
                onClick={() => { setRate(idx + 1) }}
                style={{ backgroundColor: rate < idx + 1 ? "#ddd" : "slateblue" }}
            />)
    })}

ここでは役に立たないcur<を考えてみましょう!
私がこのページに入ったのはすべて活動です!

アクティブなオブジェクトを知る...!!