React Typescript: Ant 设计表重新渲染特定列

Question

Im mutating my datasource State "this.state.question" but the Table Column "Actions" dont rerender.

if (this.state.responseMessage.successful) {
   var index = this.state.question.findIndex(item => item.no == data.item1.no);
   this.state.question[index].group = data.item1.group;
   this.state.question[index].deactivated = data.item1.deactivated;
   this.state.question[index].information = data.item1.information;
}

Column that should change:

{ title: "Actions", render: (record: ModelClass) => {
   return (
      <Space>
         <Button
            type="primary"
            disabled={record.deactivated} //<- nothing happens
         />
      </Space >
   )
}},

Answer 1

Never mutate state.

Quick glance tells me your code should look something like this:

if (this.state.responseMessage.successful) {
   this.setState(currentState => ({
      ...currentState,
      question: currentState.question.map((q) => {
        if(q.no !== data.item1.no) return q;
        return {
           ...q,
           ...data.item1
        }
      })
   }))
}