Insérer des enregistrements en utilisant 2 états

Question

Trouvez l'extrait de code complet ici

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>
  );
}

Je récupère un tableau de la base de données (exemple target tableau déclaré dans le code ci-dessus). Fondamentalement, je veux lire les enregistrements et les écrire dans une autre table.

J'utilise raw 状态来存储它们。如果您看到上面的内容，它落后于 1. Alors, en

• Cliquez n°1 : Insérer initialState
• Cliquez n°2 : Insérer target[0].

Comment résoudre ce problème pour que lorsque l'on clique sur #1, raw soit renseigné avec raw 填充 target[0] données ?

Answer 1

Suivez l'extrait de code complet

Le premier useEffect n'était pas fermé, je l'ai donc commenté et cela a fonctionné.

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}
      
    
  );
}