React组件提交时如何保存状态不重置？含投票式组件实现需求

嘿，我来帮你搞定这个问题！你的需求是做一个投票系统，点击按钮票数增加、能添加新名称，同时提交或路由切换时状态不重置对吧？我之前做过类似的功能，给你梳理下最靠谱的解决思路～

大概率是因为你把投票列表的状态放在了路由对应的组件（比如AppForm或ListOfFrameworks）里——当你通过<Link>跳转到Home再返回时，这个组件会被重新挂载，状态自然就回到初始值了。解决的核心思路是让状态脱离被路由卸载的组件，或者做持久化存储。

方案一：状态提升到父组件（最直接高效的方案） #

把投票列表的状态放到包裹路由的父组件里，因为父组件不会随路由切换被卸载，状态就能一直保留。同时利用你已有的handleCreate方法扩展功能，具体实现如下：

1. 父组件代码（管理全局状态） #

class MainContainer extends React.Component {
  // 初始化投票列表状态
  state = {
    frameworks: [
      { name: 'React', votes: 0 },
      { name: 'Vue', votes: 0 },
      { name: 'Angular', votes: 0 }
    ]
  };

  // 你原有的createAPP方法，扩展为添加新投票项
  createAPP = (newName) => {
    this.setState(prevState => ({
      frameworks: [...prevState.frameworks, { name: newName, votes: 0 }]
    }));
  };

  // 新增投票处理方法，传给子组件调用
  handleVote = (targetName) => {
    this.setState(prevState => ({
      frameworks: prevState.frameworks.map(item => 
        item.name === targetName ? { ...item, votes: item.votes + 1 } : item
      )
    }));
  };

  // 可选：持久化到本地，刷新页面也不丢状态
  componentDidMount() {
    const savedData = localStorage.getItem('voteFrameworks');
    if (savedData) {
      this.setState({ frameworks: JSON.parse(savedData) });
    }
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.frameworks !== this.state.frameworks) {
      localStorage.setItem('voteFrameworks', JSON.stringify(this.state.frameworks));
    }
  }

  render() {
    return (
      <div>
        {/* 导航和路由都放在父组件里 */}
        <Link to="/">Home</Link>
        <Route 
          exact path="/" 
          render={() => (
            <AppForm 
              frameworks={this.state.frameworks}
              handleCreate={this.createAPP}
              handleVote={this.handleVote}
            />
          )} 
        />
      </div>
    );
  }
}

2. AppForm子组件代码（渲染+交互） #

class AppForm extends React.Component {
  // 管理输入框的本地状态
  state = {
    newName: ''
  };

  // 输入框内容变化时更新状态
  handleInputChange = (e) => {
    this.setState({ newName: e.target.value });
  };

  // 点击添加按钮时调用父组件方法
  handleAddItem = () => {
    const { newName } = this.state;
    if (newName.trim()) {
      this.props.handleCreate(newName);
      this.setState({ newName: '' }); // 清空输入框
    }
  };

  render() {
    const { frameworks, handleVote } = this.props;
    const { newName } = this.state;

    return (
      <div>
        {/* 添加新名称的输入区域 */}
        <div className="add-section">
          <input
            type="text"
            value={newName}
            onChange={this.handleInputChange}
            placeholder="输入新投票项名称"
          />
          <button onClick={this.handleAddItem}>添加</button>
        </div>

        {/* 投票区块渲染 */}
        <div className="vote-blocks">
          {frameworks.map(item => (
            <div key={item.name} className="vote-block">
              <h3>{item.name}</h3>
              <p>当前票数: {item.votes}</p>
              <button onClick={() => handleVote(item.name)}>投票+1</button>
            </div>
          ))}
        </div>
      </div>
    );
  }
}

关键细节说明 #

• 状态提升：父组件管理所有投票数据，子组件只负责渲染和触发动作，路由切换时父组件不会卸载，状态自然保留。
• 函数式更新setState：更新票数和添加新项时用prevState确保拿到最新的状态，避免异步更新导致的错误。
• 本地持久化：通过localStorage实现刷新页面状态不丢失，这是可选功能，如果不需要可以去掉对应的生命周期方法。

方案二：其他进阶方案（适合复杂场景） #

如果你的项目后续会扩展更多状态管理需求，可以考虑：

• React Context：适合跨多层组件传递状态，不用一层一层props传递。
• Redux/Zustand：适合大型应用的复杂状态管理，能更清晰地追踪状态变化。

不过对于你当前的投票系统需求，状态提升+本地持久化已经完全够用啦～

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