如何为React同组件数组中的每个组件独立存储数据？

问题原因 #

你当前的写法每次只渲染statementArray中对应currentStepIndex的单个组件，切换步骤时，之前的组件会被卸载，新组件重新挂载，组件实例完全更新，所以内部状态会被重置。

让组件自身存储状态的可行性及实现方法 #

完全可行，但需要避免组件卸载导致状态丢失，有两种常见实现方式：

方式1：渲染所有组件，用CSS控制显示/隐藏 #

把所有Statement组件都挂载到DOM中，仅通过CSS控制可见性，这样组件不会被卸载，内部状态就能保留：

修改父组件的渲染代码：

<div className="App">
  {statementArray.map((statementComp, index) => (
    <div 
      key={index} 
      style={{ display: index === currentStepIndex ? 'block' : 'none' }}
    >
      {statementComp}
    </div>
  ))}

  <Buttons 
    currentStep={currentStepIndex}
    next={next}  
    back={back}  
  />
</div>

注意：如果组件数量很多，这种方式可能会占用较多DOM资源，需根据实际场景评估。

方式2：状态提升到父组件统一管理 #

如果不想同时挂载所有组件，可将每个Statement的状态存储在父组件中，通过props传递给子组件，切换步骤时状态不会丢失：

1. 父组件中添加状态管理：

import { useState } from 'react';

function App() {
  // 存储每个statement的状态，key为statementId
  const [statementStates, setStatementStates] = useState({});
  const [statementArray, setStatementArray] = useState([]);
  const [currentStepIndex, setCurrentStepIndex] = useState(0);

  // 更新指定statement的状态
  const updateStatementState = (statementId, newState) => {
    setStatementStates(prev => ({
      ...prev,
      [statementId]: newState
    }));
  };

  // 初始化statementArray时传递状态和更新方法
  const initStatements = (response) => {
    setStatementArray(
      response.data.map((statement, index) => {
        return (
          <Statement 
            key={statement.id} // 建议用statement.id作为key，比index更稳定
            currentStep={index + 1}
            statementText={statement.statement} 
            statementId={statement.id}
            // 传递已保存的状态，无则用默认值
            componentState={statementStates[statement.id] || {}}
            updateState={updateStatementState}
          />
        );
      })
    );
  };

  // 其他逻辑：next/back方法
  const next = () => {
    setCurrentStepIndex(prev => Math.min(prev + 1, statementArray.length - 1));
  };

  const back = () => {
    setCurrentStepIndex(prev => Math.max(prev - 1, 0));
  };

  return (
    <div className="App">
      {statementArray[currentStepIndex]}
      <Buttons 
        currentStep={currentStepIndex}
        next={next}  
        back={back}  
      />
    </div>
  );
}

2. Statement组件内部使用父组件传递的状态和更新方法：

import { useState, useEffect } from 'react';

function Statement(props) {
  // 用父组件传递的状态初始化内部state
  const [localState, setLocalState] = useState(props.componentState);

  // 当父组件传递的状态变化时同步（比如从其他步骤切回）
  useEffect(() => {
    setLocalState(props.componentState);
  }, [props.componentState]);

  // 更新状态时同步到父组件
  const handleChange = (newValue) => {
    const newLocalState = { ...localState, inputValue: newValue };
    setLocalState(newLocalState);
    props.updateState(props.statementId, newLocalState);
  };

  return (
    <div>
      <p>{props.statementText}</p>
      <input 
        type="text" 
        value={localState.inputValue || ''}
        onChange={(e) => handleChange(e.target.value)}
      />
    </div>
  );
}

额外建议 #

• 避免用index作为组件的key，尽量使用每个statement唯一的id，这能让React更准确地识别组件实例，避免不必要的重渲染。

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