Comment corriger cette erreur concernant l'état en réaction ?

Question

Je souhaite créer une application de réaction simple dans laquelle lorsque j'appuie sur Entrée sur un bloc, un nouveau bloc apparaîtra sous ce bloc et le reste derrière sera sous le nouveau bloc.

Mais lorsqu'il y a plusieurs blocs, lorsque j'appuie sur Entrée sur le bloc précédent, ce dernier bloc disparaît.

Je ne comprends pas. Quelqu'un peut-il signaler cette erreur ?

Voici quelques codes et photos :

editablePage.tsx

import { useState } from "react";
import EditableBlock, { BlockType } from "../editableBlock";

export default function EditablePage() {
  const [blocks, setBlocks] = useState<BlockType[]>([
    { tag: "h1", content: "Welcome", position: 0 },
  ]);

  function addBlockHandler({ tag, position }: BlockType) {
    const nextPosition = position + 1;
    const newBlock: BlockType = {
      tag: tag,
      content: nextPosition.toString(),
      position: nextPosition,
    };
    console.log(blocks);
    const blocksBeforeNew = blocks.slice(0, nextPosition);
    const blocksAfterNew = blocks.slice(nextPosition).map((block) => {
      const copy = { ...block };
      copy.position += 1;
      return copy;
    });
    const updatedBlocks = blocksBeforeNew
      .concat(newBlock)
      .concat(blocksAfterNew);
    setBlocks(updatedBlocks);
  }

  return (
    <div>
      {blocks.map(({ tag, content, position }: BlockType) => {
        return (
          <EditableBlock
            key={position}
            tag={tag}
            position={position}
            content={content}
            addBlock={addBlockHandler}
          />
        );
      })}
    </div>
  );
}

editableBlock.tsx

import { useState } from "react";
import ContentEditable, { ContentEditableEvent } from "react-contenteditable";

type TagType = "h1" | "h2" | "h3" | "p";

export interface BlockType {
  tag: TagType;
  content: string;
  position: number;
}

export interface EditableBlockProps extends BlockType {
  addBlock: (currentBlock: BlockType) => void;
}

export default function EditableBlock({
  tag,
  content,
  position,
  addBlock,
}: EditableBlockProps) {
  const [text, setText] = useState<string>(content);

  const handleChange = (evt: ContentEditableEvent) => {
    setText(evt.target.value);
  };

  const handleKeyDown = (evt: React.KeyboardEvent<HTMLElement>) => {
    if (evt.key === "Enter") {
      evt.preventDefault();
      addBlock({ tag, content, position });
    }
  };

  return (
    <ContentEditable
      tagName={tag}
      html={text}
      onChange={handleChange}
      onKeyDown={handleKeyDown}
    />
  );
}

Avant :

Après avoir appuyé sur Entrée sur le premier bloc :

J'ai découvert que l'erreur provenait de blocs mais je ne comprends pas pourquoi cela se produit.

Answer 1

Il s'agit d'un problème connu pour react-contenteditable, veuillez consulter lovasoa/react-contenteditable# 161 :

Dans la solution de contournement proposée dans la question liée, vous pouvez essayer ce commentaire, qui est une variante de Documentation Legacy React > Comment depuis useCallbackuseCallback Lire des valeurs qui changent fréquemment  :

const useRefCallback = (
  value: ((...args: T) => void) | undefined,
  deps?: React.DependencyList
): ((...args: T) => void) => {
  const ref = React.useRef(value);

  React.useEffect(() => {
    ref.current = value;
  }, deps ?? [value]);

  const result = React.useCallback((...args: T) => {
    ref.current?.(...args);
  }, []);

  return result;
};

// Usage
export function EditablePage() {
  // State, addBlockHandler function...

  const addBlock2 = useRefCallback(addBlockHandler);

  return (
    

      {blocks.map(({ tag, content, position }: BlockType) => {
        return (
          
        );
      })}
    
  );
}