为什么这个赋值的HTML id在调用的时候返回0？ React/SPFX

Question

我正在尝试获取列表中单击项目的 ID。正在从 SharePoint 列表中检索此列表。这是 JSX：

<List items={this.state.filtPanelMeetFiles.map(file => <div>{file.FileLeafRef}</div>)} onRenderCell={this._onRenderCellFiles} />

private _onRenderCellFiles = (item) => {
    return(
      <div>
        <tr data-is-scrollable>
          <td style={{ width: '150px' }} >{item}</td>
          <td style={{ width: '150px' }} >{item.Id}</td>
          <td style={{ width: '15px' }}>
            <div className={styles.editIcon}><Icon iconName="Delete" id={item.Id} onClick={this._deleteFile} />
            </div>
          </td>
        </tr>
      </div>
    );
  }

上面的 id={item.Id} 总是带回 0 无论点击什么项目。

我检索列表并在其他一些代码上以相同的方式显示它，并且成功检索了 Id。

有什么想法吗？

Answer 1

一个简单的解决方法是使用键方法并将索引添加到列表中，您可以这样尝试（使用 MAP 函数并将其作为列表中的 KEY 传递）

export default function App() {
const List = ['Hello', 'World']
const clickHandler = (i)=>{
  console.log(i)
}
return (
<div className="App">
  {List.map((element, index)=>(
    <li key = {index} onClick = {(event)=> {event.preventDefault; clickHandler(index)}}>{element}</li>
  ))}
</div>
  );
}

这会成功的:)

查看此代码作为示例（在尝试之前也打开控制台）

Check the Code here

<iframe src="https://codesandbox.io/embed/fervent-dan-te2x4?fontsize=14&hidenavigation=1&theme=dark"
     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
     title="fervent-dan-te2x4"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe>

为什么这个赋值的HTML id在调用的时候返回0？ React/SPFX

Why is this assigned HTML id returning 0 when calling it? React/SPFX

javascript

sharepoint-online

spfx