2 つの状態を使用してレコードを挿入する

Question

ここには完璧な代コードセグメント

import "./styles.css";
import React, { useState } from "react";

デフォルト関数 App() をエクスポート {
  const ターゲット = [
    { id: 16, word: "シックスティーン" },
    { id: 17, word: "セブンティーン" },
    { id: 18、単語: "18" }
  ];

  const 初期状態 = {
    tid: ""、
    名前： ""
  };
  const [カウント, setCount] = useState(0);
  const [raw, setRaw] = useState(initialState);

  関数変更() {
    setRaw((raw) => ({ ...raw, tid: target[count]?.id }));
    setRaw((raw) => ({ ...raw, 名前: target[count].word }));
    コンソール.ログ(生); //レコードを挿入するaxios関数
    setCount((カウント) => カウント 1);
  }

  戻る （
    <div className="アプリ">
      <h1 onClick={change}>クリック</h1>
      <h2>カウント : {count}</h2>
      

        配列: {target[count]?.id}、{target[count].word}
      </h2>
      

        状態オブジェクト: {raw.tid}、{raw.name}
      </h2>
    </div>
  );
}

私たちはデータベースから数値群を取得します (上のコードに target 数値群の例が記載されています)。基本的には、それを取得して別のテーブルに書き込むことを考えています。

私は、

raw 状態を使用してそれらを保存します。上の内容を確認した場合、それらは 1 の後に表示されます。 したがって、にあります

单击#1：插入
• initialState
单击#2:
• target[0]を入力します。

raw

target[0] データを充填します。

Answer 1

完全なコード スニペットに従ってください

最初の useEffect が閉じられていなかったので、コメントしたところ、機能しました。

import "./styles.css";
import React, { useState,useEffect } from "react";

デフォルト関数 App() をエクスポート {


  // useEffect ( () => {


 const ターゲット = [
     { id: 16, word: "シックスティーン" },
     { id: 17, word: "セブンティーン" },
     { id: 18、単語: "18" }
  ];





const 初期状態 = {
    tid: 0, //ターゲット[0]?.id,
    名前: "A" //target[0]?.word
  };




const [カウント, setCount] = useState(0);
const [raw, setRaw] = useState(initialState);



 useEffect ( () => {
    setRaw((raw) => ({ ...raw, tid: target[count]?.id }));
    setRaw((raw) => ({ ...raw, 名前: target[count].word }));
  }、 [カウント]）


  関数変更() {
    console.log(raw); //レコードを挿入するaxios関数
    setCount((カウント) => カウント 1);
  }

  戻る （
    

      ＃＃＃クリック＃＃＃
      
カウント: {カウント}
      

        配列: {target[count]?.id}{target[count].word}
      
      

        状態オブジェクト: {raw.tid}、{raw.name}
      
    

  );
}