Fügen Sie Datensätze mit 2 Zuständen ein

Question

Den vollständigen Codeausschnitt finden Sie hier

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

export default function App() {
  const target = [
    { id: 16, word: "sixteen" },
    { id: 17, word: "seventeen" },
    { id: 18, word: "eighteen" }
  ];

  const initialState = {
    tid: "",
    name: ""
  };
  const [count, setCount] = useState(0);
  const [raw, setRaw] = useState(initialState);

  function change() {
    setRaw((raw) => ({ ...raw, tid: target[count]?.id }));
    setRaw((raw) => ({ ...raw, name: target[count].word }));
    console.log(raw); //axios function to insert record
    setCount((count) => count + 1);
  }

  return (
    <div className="App">
      <h1 onClick={change}>Click</h1>
      <h2>Count : {count}</h2>
      <h2>
        Array: {target[count]?.id},{target[count].word}
      </h2>
      <h2>
        State Object : {raw.tid},{raw.name}
      </h2>
    </div>
  );
}

Ich erhalte ein Array aus der Datenbank (Beispiel target Array, das im obigen Code deklariert wurde). Grundsätzlich möchte ich Datensätze lesen und in eine andere Tabelle schreiben.

Ich benutze raw 状态来存储它们。如果您看到上面的内容，它落后于 1. Also, in

• Klicken Sie auf #1: Einfügen initialState
• Klicken Sie auf #2: Einfügen target[0].

Wie kann ich das Problem beheben, sodass beim Klicken auf #1 raw mit raw 填充 target[0] Daten gefüllt wird?

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}
      
      

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