同路由条件渲染组件时如何保留输入值？已尝试useRef无效

核心原因：组件卸载导致数据丢失 #

条件渲染切换组件时，第一个组件会被完全卸载，其内部的useRef或useState都会被销毁，所以返回时数据无法保留。useRef仅能在组件挂载期间保留对DOM或值的引用，组件卸载后就会失效。

可行解决方案 #

1. 状态提升到父组件 #

将输入数据的状态托管在父组件中，子组件通过props接收数据和更新方法。父组件不会随子组件切换而卸载，因此数据能一直保留。

示例代码：

父组件

import { useState } from 'react';
import Step1 from './Step1';
import Step2 from './Step2';

function Wizard() {
  const [currentStep, setCurrentStep] = useState(1);
  // 存储输入数据
  const [formData, setFormData] = useState({
    input1: '',
    input2: ''
  });

  // 统一处理输入变化
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const goToNext = () => setCurrentStep(2);
  const goBack = () => setCurrentStep(1);

  return (
    <div>
      {currentStep === 1 ? (
        <Step1
          formData={formData}
          onInputChange={handleInputChange}
          onNext={goToNext}
        />
      ) : (
        <Step2 onBack={goBack} />
      )}
    </div>
  );
}

export default Wizard;

Step1组件

function Step1({ formData, onInputChange, onNext }) {
  return (
    <div>
      <input
        name="input1"
        value={formData.input1}
        onChange={onInputChange}
        placeholder="输入框1"
      />
      <input
        name="input2"
        value={formData.input2}
        onChange={onInputChange}
        placeholder="输入框2"
      />
      <button onClick={onNext}>下一步</button>
    </div>
  );
}

export default Step1;

2. 使用localStorage持久化数据 #

如果需要页面刷新或跨会话保留数据，可以结合useState和useEffect将数据同步到localStorage。组件卸载后，数据仍存储在浏览器中，下次渲染时自动读取。

示例代码（Step1组件）：

import { useState, useEffect } from 'react';

function Step1({ onNext }) {
  // 从localStorage初始化状态
  const [input1, setInput1] = useState(localStorage.getItem('step1-input1') || '');
  const [input2, setInput2] = useState(localStorage.getItem('step1-input2') || '');

  // 输入变化时同步到localStorage
  useEffect(() => {
    localStorage.setItem('step1-input1', input1);
  }, [input1]);

  useEffect(() => {
    localStorage.setItem('step1-input2', input2);
  }, [input2]);

  const handleNext = () => {
    // 可在此添加表单验证逻辑
    onNext();
  };

  return (
    <div>
      <input
        value={input1}
        onChange={(e) => setInput1(e.target.value)}
        placeholder="输入框1"
      />
      <input
        value={input2}
        onChange={(e) => setInput2(e.target.value)}
        placeholder="输入框2"
      />
      <button onClick={handleNext}>下一步</button>
    </div>
  );
}

export default Step1;

注意事项 #

• 状态提升方案适合仅在组件切换时保留数据、无需持久化到浏览器的场景，要确保父组件不会被意外卸载。
• localStorage方案需注意：敏感数据不要存在这里，提交表单完成后建议清除对应存储项，避免残留数据影响后续使用。

内容的提问来源于stack exchange，提问作者Jay Shah