reactjs setstate 在具有.map 的 function 中不起作用

Question

早上好。

需要幫助，我有下面的腳本，問題是 setState 不工作，我想我在這里遺漏了什么？ 還是我做錯了。 下面的“返回”在“.map”中，所以我可以在數組中顯示 3 個文件。 謝謝

  constructor(props) {
super(props);
this.state = {

  // fileName: ['SAMPLE DOCUMENT 1', 'SAMPLE DOCUMENT 2', 'SAMPLE DOCUMENT 3'],
  file: [
    {fileName: 'SAMPLE DOCUMENT 1', id: 123456, hash: '9153BB2EFC17BF53218FA15C977EDCD3', fileStatus: 
'PENDING APPROVAL', fileId: 'APFEX-9153BB2E-C6F90E', isViewed: 'false', activateButton: false},
    {fileName: 'SAMPLE DOCUMENT 2', id: 124234, hash: '9153BB2EFC17BF53218JEFSFH77EDCD3', fileStatus: 
'PENDING APPROVAL', fileId: 'APFEX-9153BB2E-C6KS0E', isViewed: 'false', activateButton: false},
    {fileName: 'SAMPLE DOCUMENT 3', id: 134564, hash: '9153BBMSJFOWN562DW689FWS641WES63', fileStatus: 
'PENDING APPROVAL', fileId: 'APFEX-9153BB2E-CSS9HG', isViewed: 'false', activateButton: false}
  ],     
  
  };
  }

 activatebutton = (key) => {
  const {activateButton} = key
  this.setState({ activateButton: true }, () => {
  }); 

 }

return ( 

 {this.state.file.map(file => (
  <TableRow className={this.state.classes.row} key={file.id} data-id={file.id}>   
    <CustomTableCell align="left" className={classes.row}>
      <a
        id={`download-${file.id}`}
        // onClick={() => downloadFile({ transactionId, fileId, id, fileName })}
        onClick={() => this.activatebutton(file)}
        rel="noreferrer"
        style={{textDecoration:'none',color:'#126ebd',cursor:'pointer'}}
        // eslint-disable-next-line no-script-url
        href="javascript:void(0);"
        
      >
        {file.fileName}
      </a>
    </CustomTableCell>
    <TableRow/>
 )

Answer 1

constructor(props) {
super(props);
this.state = {

  // fileName: ['SAMPLE DOCUMENT 1', 'SAMPLE DOCUMENT 2', 'SAMPLE DOCUMENT 3'],
  file: [
    {fileName: 'SAMPLE DOCUMENT 1', id: 123456, hash: '9153BB2EFC17BF53218FA15C977EDCD3', fileStatus: 
'PENDING APPROVAL', fileId: 'APFEX-9153BB2E-C6F90E', isViewed: 'false', activateButton: false},
    {fileName: 'SAMPLE DOCUMENT 2', id: 124234, hash: '9153BB2EFC17BF53218JEFSFH77EDCD3', fileStatus: 
'PENDING APPROVAL', fileId: 'APFEX-9153BB2E-C6KS0E', isViewed: 'false', activateButton: false},
    {fileName: 'SAMPLE DOCUMENT 3', id: 134564, hash: '9153BBMSJFOWN562DW689FWS641WES63', fileStatus: 
'PENDING APPROVAL', fileId: 'APFEX-9153BB2E-CSS9HG', isViewed: 'false', activateButton: false}
  ],     
  
  };
  }

 activatebutton = (key) => {
   let editedFiles = oldFiles.map(file => if(file.id === fileToChange.id){ file.activateButton = true });
this.setState({
file: editedFiles
});


 }

return ( 

 {this.state.file.map(filenter code heree => (
  <TableRow className={this.state.classes.row} key={file.id} data-id={file.id}>   
    <CustomTableCell align="left" className={classes.row}>
      <a
        id={`download-${file.id}`}
        // onClick={() => downloadFile({ transactionId, fileId, id, fileName })}
        onClick={() => this.activatebutton(file)}
        rel="noreferrer"
        style={{textDecoration:'none',color:'#126ebd',cursor:'pointer'}}
        // eslint-disable-next-line no-script-url
        href="javascript:void(0);"
        
      >
        {file.fileName}
      </a>
    </CustomTableCell>
    <TableRow/>
 )

Answer 2

我想你想重新創建文件數組，只需將單擊項目的activateButton屬性更改為true 。 要在 React 中執行此操作，您必須克隆數組，將所有項目映射到自身，除了您單擊的項目。 這是您從頭開始創建的，傳播所有舊屬性並將activateButton設置為true 。 這是代碼：

activatebutton = (file) => (event) => {
  event.preventDefault(); // prevents the link from reloading the page
  const { id } = file;

  this.setState((state) => {
    const list = state.file;
    const newList = list.map((item) =>
      item.id === id ? { ...item, activateButton: true } : item
    );

    return { file: newList };
  });
};

注釋：

activatebutton = (文件) => (事件) => {

我們希望activatebutton是第二個訂單 function，它接收點擊的項目，然后接收事件。 更好的方法是直接只傳遞 id。

this.setState((state) => {... })

每當您想基於自身更新 state 時，請使用功能性 setState。 傳遞一個 function，它的參數是當前的 state，返回是一個更新 object。在這種情況下，是 state 的file屬性。

item.id === id? {...item, activateButton: true }: 項目

這是以下簡稱：

if (item.id === id) {
  return Object.assign({}, item, {activateButton: true})
} else {
  return item
}

我制作了一個CodeSandbox 演示，其中甚至包括作為 doubleClick 事件的項目切換。