React类组件ListOfItems加条件后componentDidUpdate仍无限循环如何解决

• 拼写与属性名错误：构造函数错误拼写为construction，同时state中定义的列表字段为objectList（小写o开头），但componentDidUpdate中判断的是this.state.ObjectList（大写O开头），该字段不存在，值永远为undefined，条件判断逻辑完全失效。
• 引用类型比较逻辑错误：数组是引用类型，即使两个数组内容完全一致，只要是不同的引用地址，===判断就会返回false。每次getObjectList请求成功后你都会重新赋值state.objectList为新数组，必然会触发componentDidUpdate的条件判断通过，再次调用getObjectList，形成无限循环。
• 触发时机逻辑错误：你需要的触发时机是「用户完成删除操作」，而非「列表状态变化」，监听列表变化再拉新列表的逻辑本身就会形成闭环死循环。

方案1（推荐）：通过删除回调触发列表刷新 #

直接删掉componentDidUpdate中监听objectList变化的逻辑，将删除成功的回调函数作为props传递给Object组件，用户点击删除并操作成功后，由子组件触发回调，父组件再调用getObjectList拉取最新列表，从根源避免死循环。

方案2：修复原有比较逻辑（不推荐） #

如果你一定要用componentDidUpdate监听，需要修改判断逻辑为比较数组的实际内容，而非引用地址，同时确保getObjectList返回的列表如果和当前state中内容完全一致时，不执行setState操作，切断循环链路。

// ListOfItems.js 修正后代码
class ListOfItems extends Component {
  // 修正构造函数拼写
  constructor (props) {
    super(props);
    this.state = {
      objectList: []
    }
  }

  componentDidMount() {
     this.getObjectList();
  }

  // 删掉原有的componentDidUpdate监听逻辑

  getObjectList = () => {
    const input = { id_for_this_list: id }
    fetch( connectToApi, {
       method: "PUT",
       headers: { /* 配置请求头 */ },
       body: JSON.stringify(input)
    })
       .then(res => res.json())
       .then(result => {
         // 请求成功后更新列表
         this.setState({
           objectList: result.data
         })
       })
       .catch(err=>{console.error(err)});
  }

  // 新增删除成功后的回调
  handleDeleteSuccess = () => {
    // 仅删除成功后拉一次最新列表
    this.getObjectList();
  }

  render() {
    return (
      <>
        {this.state.objectList.map(item => (
          <Object 
            key={item.id} // 必须加唯一key
            data={item}
            onDeleteSuccess={this.handleDeleteSuccess} // 传递回调
            // 其他props
          />
        ))}
      </>
    )
  }
}

// Object.js 中删除逻辑补充
// 原有的删除接口调用成功后，触发父组件传入的回调
handleDelete = () => {
  // 调用删除接口的逻辑
  fetch(deleteApi, {
    // 接口配置
  })
  .then(res => res.json())
  .then(result => {
    if(result.success) {
      // 触发父组件回调刷新列表
      this.props.onDeleteSuccess();
    }
  })
}

• 列表渲染的map方法必须给子组件加唯一key属性，否则会出现渲染异常。
• 传递给Object组件的objectList属性不需要传整个列表，子组件只需要自己的item数据即可，冗余属性会增加不必要的重渲染。

内容的提问来源于stack exchange，提问作者penguin