React Typescript: Ant Design Table Rerender specific Column-CodePudding

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

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

Column that should change:

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

CodePudding user response：

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
        }
      })
   }))
}