Рендеринг компонента React даже с ключом. Вход теряет фокус

Question

Здесь я предоставил урезанную версию моего компонента. В основном он содержит массив «фаз», которые меняют то, что показано. Моя проблема в том, что даже если у всего есть ключ, он повторно отображает ввод при каждом изменении, и ввод теряет фокус после ввода каждого символа. Как я могу правильно структурировать это, чтобы сообщить React, что этот компонент не должен быть повторно отрисован?

import React, { useState } from 'react'

export default function Example({ history }) {
  const [phase, setPhase] = useState(0)
  const [text, setText] = useState('')

  let Phases = []

  Phases[0] = () => {
    return (
      <div key='keyK1'>
        <div key='yourkeyinputcontainer'>
          <input placeholder='Input' type='text' value={text} onChange={(e) => setText(e.target.value)} key='yourinputbox'></input>
        </div>
      </div>
    )
  }

  const Content = Phases[phase]

  return (
    <>
      <Content key='contentkey' />
    </>
  )
}

Answer 1

вы можете попробовать что-то вроде этого. Вместо определения каждой фазы вы можете определить phase component и заставить его принимать все необходимые данные в качестве реквизита.

import React, { useState } from "react";

const Phase = ({ key1, key2, key3, text, handleChange }) => {
  return (
    <div key={key1}>
      <div key={key2}>
        <input
          placeholder="Input"
          type="text"
          value={text}
          onChange={e => handleChange(e.target.value)}
          key={key3}
        />
      </div>
    </div>
  );
};

const App = ({ history }) => {
  const [phase, setPhase] = useState(0);
  const [text, setText] = useState("bbbb");
  // instead of defining whole component just define the data here and pass them as props
  const phases = [{ key1: "key1", key2: "key2", key3: "key3" }];
  const handleChange = value => {
    setText(value);
  };

  const content = phases[phase];

  return (
    <Phase
      key1={content.key1}
      key2={content.key2}
      key3={content.key3}
      text={text}
      handleChange={handleChange}
    />
  );
};

export default App;

Answer 2

вы можете сделать компонент ваших полей ввода (ваш phases) отдельно и попытаться использовать memo(Content) на них, чтобы избежать повторного рендеринга, когда значение не изменилось, и после того, как вы создали компонент ваших фаз с помощью разные имена, все, что вам нужно сделать, это:

export default memo(Content)

также, если у вас есть массив-оболочка для хранения всех ваших фаз, вместо того, чтобы просто помещать его в простой массив, например:

let Phases = []

вы можете использовать useMemo хук от react для его обработки:

let Phases = useMemo(() => { return [] }, [...list of dependancies])