Question

在我所有的功能上，我致电setstate时，我的程序都会重新显示。
我添加了一个新功能来删除标签，并且在调用setstate之后，程序不会重新呈现。
我的JSON得到更新，但单击的标记未在浏览器中删除。

我也尝试使用this.forceUpdate();，但这仍然行不通。

这是我的代码

{Object.keys(props.tags).map((key, i) =>
              <div style={{backgroundColor: "#0753ad", height: "20px", borderRadius: "3px", display: "inline-block", padding: "5px", lineHeight: "0px", float: "left", color: "white", marginRight: "5px", fontSize: "12px"}}>
                {props.tags[i].name} <i className="fa fa-cog"></i> <i className="fa fa-trash" key={i} onClick={() => props.ondeletetag(props.index, i)}></i>
              </div>
            )}

这是函数：

ondeletetag(row: any, nr: any) {
    const array = this.state.fields.columns;
    array[row].tags.splice(nr, 1);
    this.setState({ fields: { columns: array } });
    console.log(this.state.fields.columns);
  }

我的课看起来像这样：

class CrmConnectorColumns extends React.Component<Props, State> {

  constructor(props: Props) {
    super(props);
    this.moveCard = this.moveCard.bind(this);
    this.oncheck = this.oncheck.bind(this);
    this.ontextupdate = this.ontextupdate.bind(this);
    this.ondeleterow = this.ondeleterow.bind(this);
    this.onaddnewrow = this.onaddnewrow.bind(this);
    this.ondeletetag = this.ondeletetag.bind(this);
    this.state = {
      isLoading: true,
      isSaving: false,
      canSave: false,
      errorColor: "danger",
      fields: { columns: {} },
      deleteModalActive: false
    };
  }

渲染方法：

{Object.keys(columns).map((key, i) =>
             <CardWithDnD
             key={columns[i].index}
             indexnr={i}
             moveCard={this.moveCard}
             oncheck={this.oncheck}
             ontextupdate={this.ontextupdate}
             ondeleterow={this.ondeleterow}
             ondeletetag={this.ondeletetag}
             {...columns[i]}
           />
            )}

我希望我的程序在setstate之后重新渲染，而不仅仅是更新状态。
有谁知道为什么我的程序不退回？
完整代码沙盒：https://codesandbox.io/s/n1064qjwkm

Answer 1

您要删除的标记作为任何组件的子代存在吗？如果需要，您需要更新父组件的状态以查看更改，例如从视图中删除标签，这将在不刷新页面的情况下重新呈现视图中的所有内容。

Answer 2

您已在组件中编写了shouldComponentUpdate函数，因为如果在此处返回false，则更新lifeCyle将停止。

根据反应生命周期，如果状态发生更改，更新生命周期将始终调用render（）方法，除非您在shouldComponentUpate中将其停止或已扩展pureComponent。

Answer 3

我通过制作标签数组的副本来修复它，从该数组中删除元素，然后用副本覆盖现有数组。

ondeletetag(e: any) {    
   var array = this.state.fields.columns;
   const newlist = [].concat(array[e.target.id].tags); // Clone array with concat or slice(0)
   newlist.splice(e.target.dataset.key, 1);
   array[e.target.id].tags = newlist;
   this.setState({ fields: { columns: array } });
}

调用setstate后程序未重新呈现。

3 个答案: