无法更新React中的组件

Question

我收到这样的警告 "警告。在现有状态转换期间无法更新（例如在 render). 渲染方法应该是道具和状态的纯函数。" 我看了堆栈溢出，没有找到适合我情况的答案。在我的眼里，一切看起来都是正确的，所以我不知道是怎么回事。下面是相关的代码，如果需要的话，我可以发更多。我正在将我的逻辑分解成独立的组件.当我以前的方式时，逻辑工作，但现在它表现得很奇怪。任何帮助都将是非常感激的!

父组件。

  <DisplayPoemList thoughtsProp={this.state.thoughts}  onClick={this.handleDeleteClick}      name='Delete Thoughts' /> 

子组件：

    import React from 'react' 
    import { DisplayPoem } from '../DisplayPoem'

      export const DisplayPoemList = (props) => {
          return (
            <div className="flex-item-main">
                <ol>
                    {props.thoughtsProp.map((thought, index)=> 
                        <DisplayPoem className='displayPoem' key={index} onClick={props.onClick(index)} name={props.name} value={thought} />
                    )}
                </ol>
            </div> 
          )
      }  

这是以前的，工作中的，父组件的代码，它显示的是 displayPoem

    <div className="flex-item-main">
         <ol>
            {this.state.thoughts.map((thought, index)=> 
                <DisplayPoem className='displayPoem' key={index} onClick={() => { this.handleDeleteClick(index) }} name='Delete Thoughts' value={thought} />
            )}
          </ol>
         </div>

Answer 1

尝试改变 onClick 的子组件的回调。props.onClick(index) 到 ()=>props.onClick(index).