利用2個狀態插入記錄

Question

在此處找到完整的程式碼片段

導入“./styles.css”;
從「react」導入 React, { useState };

導出預設函數 App() {
  常量目標 = [
    { id: 16, 單字: "十六" },
    { id: 17, 單字: "十七" },
    { id：18，字：「十八」}
  ];

  常量初始狀態 = {
    時間：“”，
    姓名： ””
  };
  const [count, setCount] = useState(0);
  const [raw, setRaw] = useState(initialState);

  函數變化（）{
    setRaw((raw) => ({ ...raw, tid: target[count]?.id }));
    setRaw((raw) => ({ ...raw, name: target[count].word }));
    控制台.log(原始); //axios函數插入記錄
    setCount((count) => 計數 1);
  }

  返回 （
    

      
點選
      
計數：{計數}
      

        陣列：{target[count]?.id},{target[count].word}
      </h2>
      

        狀態物件：{raw.tid}，{raw.name}
      </h2>
    
  ）；
}

我從資料庫取得一個倉庫（在上面的程式碼中聲明了範例 target 倉庫）。基本上，我想讀取記錄放置其寫入不同的表。

我使用raw看到狀態來儲存它們。如果您上面的內容，它落後於1。 所以，在

• 點選#1：插入initialState
• 點選#2：插入target[0]。

如何修復它，方便在點擊#1時，raw填充target[0]資料？

Answer 1

遵循完整的程式碼片段

#第一個 useEffect 沒有關閉，所以我對它發表了評論，它起作用了。

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

export default function App() {


  // useEffect ( () => {


 const target = [
     { id: 16, word: "sixteen" },
     { id: 17, word: "seventeen" },
     { id: 18, word: "eighteen" }
  ];





const initialState = {
    tid: 0, //target[0]?.id,
    name: "A" //target[0]?.word
  };




const [count, setCount] = useState(0);
const [raw, setRaw] = useState(initialState);



 useEffect ( () => {
    setRaw((raw) => ({ ...raw, tid: target[count]?.id }));
    setRaw((raw) => ({ ...raw, name: target[count].word }));
  }, [count])


  function change() {
    console.log(raw); //axios function to insert record
    setCount((count) => count 1);
  }

  return (
    

      
Click
      
Count : {count}
      

        Array: {target[count]?.id}{target[count].word}
      
      

        州 Object : {raw.tid},{raw.name}
      
    
  );
}