Используйте useEffect для повторной инициализации useState

Question

У меня есть компонент с <div contentEditable /> внутри. Компонент инициализируется с initialValue. Обработчик onChange обновляет value. Это выглядит примерно так:

const Editable = ({ initialValue }) => {
  const [value, setValue] = useState(initialValue);

  return (
    <div contentEditable onChange={event => setValue(event.currentTarget.value)}>
      {value}
    </div>
  );
};

Теперь, если родительские компоненты передают новый initialValue, value и, следовательно, содержимое div не обновляется, так как состояние уже инициализировано.

Можно ли в таком случае использовать useEffect следующим образом или есть другой способ?

const Editable = ({ initialValue }) => {
  const [value, setValue] = useState(initialValue);

  useEffect(() => setValue(initialValue), [initialValue]);

  return (
    <div contentEditable onChange={event => setValue(event.currentTarget.value)}>
      {value}
    </div>
  );
};

Answer 1

Вполне нормально использовать его таким образом. Возможно, вы захотите переименовать initialValue во что-то вроде value, чтобы было ясно, что это не просто значение по умолчанию.

Чтобы очистить код, вы можете создать собственный хук, который обрабатывает именно этот Ситуация выглядит так:

const useUpdatingState = (value) => {
  const [internalValue, setInternalValue] = useState(value);
  useEffect(() => {
    setInternalValue(value)
  }, [value]);
  return [internalValue, setInternalValue];
};

Это сделает ваш код немного более читабельным и сделает код многократно используемым в других частях кода, где вы хотели бы такое поведение.

Answer 2

Как предложено в вопросе, useEffect является правильным решением.

const Editable = ({ initialValue }) => {
  const [value, setValue] = useState(initialValue);

  useEffect(() => setValue(initialValue), [initialValue]);

  return (
    <div contentEditable onChange={event => setValue(event.currentTarget.value)}>
      {value}
    </div>
  );
};