Как я могу вызвать повторную отрисовку элемента (который использует состояние) в функции обратного вызова?

Я внес некоторые изменения, и все должно работать нормально. Изменения: -

• отделенный TestComponent как дочерний компонент с реквизитами для индекса, selectedOption и функцией handleSelectChange.

• handleSelectChange обновляет правильный параметр в состоянии, сопоставляя текущие параметры.

• AddComponent добавляет в список новый экземпляр TestComponent, поддерживая синхронизацию состояния.

попробуйте и дайте мне знать, если это сработает для вас :)

import React, { useState, useEffect } from 'react';

interface Option {
  id: number;
  name: string;
}

const options: Option[] = [
  { id: 1, name: 'Test 1' },
  { id: 2, name: 'Test 2' },
  { id: 3, name: 'Test 3' },
];

const TestComponent = ({ index, selectedOption, handleSelectChange }: { index: number; selectedOption: Option; handleSelectChange: (index: number, id: number) => void }) => {
  return (
    <div className = "flex flex-row gap-5" id = {`${index}`}>
      <select
        value = {selectedOption.id}
        onChange = {(e) => handleSelectChange(index, parseInt(e.target.value))}
      >
        {options.map((option, idx) => (
          <option key = {idx} value = {option.id}>
            {option.name}
          </option>
        ))}
      </select>
      <input readOnly value = {selectedOption.id} />
    </div>
  );
};

export default function CreateTestComponent() {
  const [selectedOptions, setSelectedOptions] = useState<Option[]>([options[0]]);
  const [components, setComponents] = useState<JSX.Element[]>([]);

  useEffect(() => {
    setComponents([<TestComponent key = {0} index = {0} selectedOption = {options[0]} handleSelectChange = {handleSelectChange} />]);
  }, []);

  const handleSelectChange = (index: number, id: number) => {
    setSelectedOptions((old) =>
      old.map((opt, idx) => (idx === index ? options.find((option) => option.id === id)! : opt))
    );
  };

  const addComponent = () => {
    setSelectedOptions([...selectedOptions, options[0]]);
    setComponents((old) => [
      ...old,
      <TestComponent key = {old.length} index = {old.length} selectedOption = {options[0]} handleSelectChange = {handleSelectChange} />,
    ]);
  };

  return (
    <>
      <button type = "button" onClick = {addComponent} className = "bg-black text-white rounded px-3 py-1">
        Add a Component
      </button>
      <div>
        <h1>Component testing!</h1>
        <div>
          <ul className = "list-none">
            {components.map((component, index) => (
              <li key = {index}>
                <div className = "flex flex-row gap-5">{component}</div>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </>
  );
}

Вы сохраняете JSX в своем состоянии React, что приводит к устаревшим замыканиям Javascript. Вам следует только сохранять данные в состоянии, а затем сопоставлять их с JSX при рендеринге. Вы также немного усложняете логику, используя несколько состояний для представления «данных», того, что добавляется и т. д. Ее можно свести к одному состоянию.

Пример рефакторинга:

• Переместите данные статических параметров за пределы дерева React.
• Вы используете Typescript, поэтому вам действительно следует использовать его и создавать полезные типы/интерфейсы.
• Используйте одно состояние selectedOptions, которое представляет собой массив объектов со свойствами id и name, которые вы визуализируете.
• Добавьте к данным свойство GUID, чтобы их всегда можно было однозначно идентифицировать.
• Используйте обновления состояния для поверхностного копирования текущего состояния, которое вы обновляете, и возврата для следующего значения состояния.
• При добавлении новых «компонентов» создайте новый объект данных, который представляет компонент/выбранный параметр, который вы хотите визуализировать.

import { useState } from "react";
import { nanoid } from "nanoid";

interface Option {
  id: number;
  name: string;
}

interface SelectedOption extends Option {
  _id: string;
}

const options: Option[] = [
  { id: 1, name: "Test 1" },
  { id: 2, name: "Test 2" },
  { id: 3, name: "Test 3" },
];

const createOption = (): SelectedOption => ({
  _id: nanoid(),
  ...options[0],
});

function CreateTestComponent() {
  const [selectedOptions, setSelectedOptions] = useState<SelectedOption[]>([
    createOption(),
  ]);

  const renderOptions = (option: SelectedOption) => {
    return (
      <div className = "flex flex-row gap-5" id = {`${option._id}`}>
        <select
          onChange = {(e) => {
            const id = Number(e.target.value);
            setSelectedOptions((selectedOptions) =>
              selectedOptions.map((selectedOption) =>
                selectedOption._id === option._id
                  ? { ...selectedOption, id }
                  : selectedOption
              )
            );
          }}
        >
          {options.map((option) => (
            <option key = {option.id} value = {option.id}>
              {option.name}
            </option>
          ))}
        </select>
        <input readOnly value = {option.id} />
      </div>
    );
  };

  return (
    <>
      <button
        type = "button"
        onClick = {() => {
          setSelectedOptions((selectedOptions) =>
            selectedOptions.concat(createOption())
          );
        }}
        className = "bg-black text-white rounded px-3 py-1"
      >
        Add a Component
      </button>
      <div>
        <h1>Component testing!</h1>
        <div>
          <ul className = "list-none">
            {selectedOptions.map((option: SelectedOption) => {
              return (
                <li key = {option._id}>
                  <div className = "flex flex-row gap-5">
                    {renderOptions(option)}
                  </div>
                </li>
              );
            })}
          </ul>
        </div>
      </div>
    </>
  );
}