Question

在我的代码中，每当我调用setState时，似乎确实在改变状态，但是并没有反映在浏览器中。这是我的调用setState的函数。在我的状态下，此函数从名为rows1的数组中删除元素：

removeFromRowsById = index => {
   console.log("IN REMOVE FUNCTION");


   const newList = [...this.state.rows1];
   newList.splice(index, 1);
   this.setState({ rows1: newList });
};

这是我使用rows1的内容的渲染方法的一部分。

 return (
  <Paper className={classes.root}>
    <EnhancedTableToolbar numSelected={selected.length} />
    <div className={classes.tableWrapper}>
      {console.log("UPDATED ARRAY:", rows1)} //I PRINT IT HERE
      <Table className={classes.table} aria-labelledby="tableTitle">
        <EnhancedTableHead
          rows={rows1} //I USE IT HERE
          order={order}
          orderBy={orderBy}
          onRequestSort={this.handleRequestSort}
        />
         ......

在分配rows1之前，请注意我在rows上登录的位置。在控制台中，起初它会打印rows1而不删除值，然后我猜想状态改变后，它会重新渲染并打印带有删除值的rows1，这意味着少了一个项目在列表中，这很好。问题是，这没有反映在浏览器中。好像什么都没有改变

注意：当我在更改后复制rows1的值并将其分配给rows时，它会正确反映出来，因此我知道我正在分配适当的值变量。我该如何解决这个问题。

解决此问题的唯一方法是在removeFromRowsById的回调中添加一个布尔值，并在状态更新后将其设置为true。而且比起只在条件为真时才需要返回render方法，否则我将返回其他内容。我认为这不是正确的方法，因为它应该使用rows1的新值正确地重新呈现，但是似乎它保留了分配给row的旧值。请与我分享您的想法，如果事情不清楚，请告诉我。我不想发布我的整个代码，因为它很长。

Answer 1

问题是，正如您在原始文档中看到的那样，我正在将rows1传递给EnhancedTableHead内的一个属性。因此，由于我这样做了，rows内的EnhancedTableHead在setState之后并没有得到更新，因为我在我的render方法中使用的状态是这样的：const { rows } = this.state;而是props，应该是这样的const { rows } = this.props;。

希望对以后的人有所帮助！

reactjs不会在浏览器中重新呈现

1 个答案: