Question

我还是一个React新手，我正在开发一个基本的选举核对应用程序，该应用程序汇总了两个主要政党中各个州的结果，然后确定总体上谁得票最多。我将项目的主要任务分为三个阶段，第一个阶段是能够添加个人状态结果，这已经完成。第二个是能够显示最新状态结果，而最后一个是总结选票并确定获胜者。

我目前处于第二阶段，我遇到的问题是，添加新的状态条目后，该值未显示在DOM中，即使当我使用React扩展时它显示状态（我实际上是React状态）。我将代码的一部分粘贴到我认为错误来自此处的位置，并包括指向github存储库的链接。

这是一个完全个人的教育项目。我将不胜感激任何能帮助我知道如何使新进入的州（我的意思是国家州，而不是React州）展示的帮助。
Github Repository

     > handleSubmit = (e) => {
     e.preventDefault();
     this.addstateVote(this.state.nameofstate, this.state.apcVotes,   this.state.pdpVotes);
 }

  addstateVote=(nameofstate, apcVotes, pdpVotes)=>{
    const newStateVotes=[...this.state.stateVote, {nameofstate, apcVotes, pdpVotes}]
this.setState({stateVote:newStateVotes})
  }

  render() {
    const DisplayStateResult=this.state.stateVote.map(function (datasource) {
            return (<DisplayStateResults key={datasource.index} name={datasource.name} apcVotes={datasource.apcVotes} pdpVotes={datasource.pdpVotes}/>)
      })
return (
  <div className="App">
    <NavBar />
    <AddStateResult 
        handleChange={this.handleChange} 
        nameofstate={this.state.nameofstate} 
        apcVotes={this.state.apcVotes}
        pdpVotes={this.state.pdpVotes}
        handleSubmit={this.handleSubmit}
        />
        <br />
        <table>
        <caption>Collated Results</caption>
        <thead>
          <tr>
          <th width='100'>State</th>
          <th width='50'>APC</th>
          <th width='50'>PDP</th>
         </tr>
         </thead>
          </table>

         {DisplayStateResult}
  </div>
);

}

Answer 1

好吧，所以我看了看你的Github仓库，你有两个主要问题：

首先，您要在AddStateResuts调用函数“ handleSubmit”，但没有传递必需的“ e”参数才能使其正常工作。

如果您查看自己的开发工具控制台，那么必须有关于它的警告。

您可以在以下位置修复组件AddStateResuts的第8行：

    <form onSubmit={e => this.props.handleSubmit(e)}>

第二，即使现在显示APC和PDP值，也不会显示州名称。

那是因为您在“ AddStateResuts”处将其命名为“ nameofstate”，而在“ DataSource”和“ App”处将其命名为“ name”。我要做的就是将状态名称的所有“实例”在“数据源”，“ DisplayStateResult”和“ App”组件上的状态名称更改为“ nameofstate”，因为它更具体，现在像魅力。

良好的编码，我也是React的新手，一开始可能会造成混乱，我建议您始终关注常规的dev工具控制台，而不仅仅是React工具。

状态更改，但未反映在DOM中

1 个答案: