Javascript 不调用setState

我正在尝试创建一个表，其中的条目可以从表中添加或删除到列表中，反之亦然

似乎错误发生在setState方法中，因为没有执行回调中的日志

以下是我的组件：

Array.prototype.invertedSplice = function() {
    Array.prototype.splice.apply(this, arguments);
    return this;
};
class SomeName extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      table: {
        country: ["United States", "Canada", "Great Britain"],
        medals: [127, 63, 67]
      },
      dropdown: {
        country: [],
        medals: []
      }
    };
    this.TableView = this.TableView.bind(this);
    this.ListView = this.ListView.bind(this);
  }
  ListView() {
    let list = [];
    for (let i = 0; i < this.state.dropdown.country.length; i++) {
      list.push(<div class="listitem">
        {this.state.dropdown.country[i]}
        <button key={this.state.dropdown.country[i]} onClick={this.addEntry.bind(this, i)}><svg/></button>
      </div>);
    }
    return(list);
  }
  TableView() {
    let table = [];
    console.log("tableview called");
    for (let i = 0; i < this.state.table.country.length; i++) {
      table.push(
        <tr>
          <td>{this.state.table.country[i]}</td>
          <td>{this.state.table.medals[i]}</td>
          <td key={this.state.table.country[i]}><button onClick={this.removeEntry.bind(this, i)}><svg width="70" height="5">
            <line x1="3" y1="2.5" x2="67" y2="2.5" />
            </svg></button></td>
        </tr>
      );
    }
    return(table);
  }

  addEntry (entryIndex) {
    this.setState((prevState) => ({
      table: {
        country: 
         this.state.table.country.splice(entryIndex, 0, this.state.dropdown.country[entryIndex]),
        medals: this.state.table.medals.splice(entryIndex, 0, this.state.dropdown.medals[entryIndex])
      },
      dropdown: {
        country: this.state.dropdown.country.invertedSplice(this.state.dropdown.country[entryIndex], 1),
        medals: this.state.dropdown.medals.invertedSplice(this.state.dropdown.medals[entryIndex], 1)
      }
    }));
  }

  removeEntry (entryIndex) {
    console.log("removeEntry called")
    this.setState((prevState) => ({
      table: {
        country: this.state.table.country.invertedSplice(this.state.table.country[entryIndex], 1),
        medals: this.state.table.medals.invertedSplice(this.state.table.medals[entryIndex], 1)
      },
      dropdown: {
        country: 
          this.state.dropdown.country.concat(this.state.table.country.splice(entryIndex, 1)),
        medals: this.state.dropdown.medals.concat(this.state.dropdown.medals.splice(entryIndex, 1))
      }
    }), () => console.log("the state was set"));
  }

  render() {
    console.log("render called");
    return(
      <div>
        <div className="list">
          <this.ListView />
        </div>
        <div className="table">
          <table>
            <caption>Example!</caption>
            <tbody>
              <tr>
                <th>Country</th>
                <th>Medals</th>
              </tr>
              <this.TableView />
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}

Array.prototype.invertedSplice=function（）{
Array.prototype.splice.apply（这是参数）；
归还这个；
};
类SomeName扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
表:{
国家：[“美国”、“加拿大”、“英国”]，
奖牌：[127、63、67]
},
下拉列表：{
国家：[]，
奖牌：[]
}
};
this.TableView=this.TableView.bind（this）；
this.ListView=this.ListView.bind（this）；
}
ListView（）{
让列表=[]；
for（设i=0；i({
表:{
国家：
this.state.table.country.splice（entryIndex，0，this.state.dropdown.country[entryIndex]），
奖牌：this.state.table.aclements.splice（entryIndex，0，this.state.dropdown.aclements[entryIndex]）
},
下拉列表：{
国家：this.state.dropdown.country.InversedSplice（this.state.dropdown.country[entryIndex]，1），
奖牌：this.state.dropdown.carems.inversedsplice（this.state.dropdown.carems[entryIndex]，1）
}
}));
}
removeEntry（entryIndex）{
log（“调用removeEntry”）
this.setState（（prevState）=>({
表:{
国家：this.state.table.country.InversedSplice（this.state.table.country[entryIndex]，1），
奖牌：this.state.table.carems.InversedSplice（this.state.table.carems[entryIndex]，1）
},
下拉列表：{
国家：
this.state.dropdown.country.concat（this.state.table.country.splice（entryIndex，1）），
奖牌：this.state.dropdown.carmes.concat（this.state.dropdown.carmes.splice（entryIndex，1））
}
})，（）=>console.log（“状态已设置”）；
}
render（）{
console.log（“渲染调用”）；
返回(
例子！
国家
奖牌
);
}
}

---

这是我的第一个问题，所以请随时告诉我有关礼仪或代码质量的任何提示。

如果您试图从中使用

拼接

功能，您将希望将其移出组件，因为您只是在

阵列

原型中添加一个功能

country

是一个数组，并且

Splicted（）

在数组原型上不存在，因此它抛出了一个错误。您的组件中刚刚有一个

spaited（）

函数

Array.prototype.spaited=function（）{
Array.prototype.splice.apply（这是参数）；
归还这个；
};
类SomeName扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
表:{
国家：[“美国”、“加拿大”、“英国”]，
奖牌：[127、63、67]
},
下拉列表：{
国家：[]，
奖牌：[]
}
};
this.TableView=this.TableView.bind（this）；
this.ListView=this.ListView.bind（this）；
}
ListView（）{
让列表=[]；
for（设i=0；i({
表:{
国家：this.state.table.country.splice(
entryIndex，
0,
this.state.dropdown.country[entryIndex]
),
奖牌：this.state.table.aclements.splice(
entryIndex，
0,
此.状态.下拉列表.奖牌[entryIndex]
)
},
下拉列表：{
国家：this.state.dropdown.country.spaited(
this.state.dropdown.country[entryIndex]，
1.
),
奖牌：这个。状态。下拉。奖牌。拼接(
此.state.dropdown.奖牌[entryIndex]，
1.
)
}
}));
}
removeEntry（entryIndex）{
log（“调用removeEntry”）；
这是我的国家(
prevState=>({
表:{
国家：this.state.table.country.patched(
this.state.table.country[entryIndex]，
1.
),
奖牌：this.state.table.奖牌.拼接(
this.state.table.奖牌[entryIndex]，
1.
)
},
下拉列表：{
国家：this.state.dropdown.country.concat(
this.state.table.country.splice（entryIndex，1）
),
奖牌：this.state.dropdown.奖牌.concat(
this.state.dropdown.carners.splice（entryIndex，1）
)
}
}),
（）=>console.log（“状态已设置”）
);
}
render（）{
console.log（“渲染调用”）；
返回(
例子！
国家