2 つの状態を使用してレコードを挿入する
P粉545682500
P粉545682500 2024-02-26 21:21:20
0
1
483

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

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] データを充填します。

P粉545682500
P粉545682500

全員に返信(1)
P粉744831602

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

最初の 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}

); }

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート