reactjs setstate 在具有 .map 的函数中不起作用答案

【问题标题】：reactjs setstate not working in function that has .mapreactjs setstate 在具有 .map 的函数中不起作用
【发布时间】：2020-08-19 00:22:55
【问题描述】：

早安。

需要帮助，我有以下脚本，问题是 setState 不起作用，我想我在这里遗漏了什么？还是我做错了。下面的“return”在“.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/>
 )

【问题讨论】：

定义“不工作”。
我想将 this.state.file[].activebutton 中的状态从 false 更改为 true，但它没有改变
activatebutton = (key) => { leteditedFiles = oldFiles.map(file => if(file.id === fileToChange.id){ file.activateButton = true }); this.setState({ 文件：editedFiles }); }
嗨 Kishor，问题，“oldFiles”是从哪里来的？这是为了激活按钮功能吗？原来是错误。谢谢

标签： javascript reactjs jsx setstate

【解决方案1】：

我想您想重新创建文件数组，只需将单击项目的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 = (file) => (event) => {

我们希望activatebutton 是一个二阶函数，它接收点击的项目，然后接收事件。更好的是直接传递 id。

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

每当您想根据自身更新状态时，请使用函数式 setState。传递一个函数，其参数是当前状态，返回是一个更新对象。在这种情况下，状态的file 属性。

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

以下简称：

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

我创建了一个CodeSandbox Demo，其中甚至包括作为双击事件的项目切换。

【讨论】：

顺便说一句，如果您不想链接到另一个页面，为什么要使用标签？使用
它工作了！，只是，我从activatebutton函数中删除了（事件）和event.preventDefault，页面也没有重新加载，这是我的预期结果，我可以吗删除了那些“事件”？谢谢
我们只在默认行为不受欢迎时添加 preventDefault。

【解决方案2】：

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

【讨论】：