React组件渲染双接口数据时崩溃问题求助

看起来你碰到了两个典型的React异步数据渲染问题——空值访问导致的组件崩溃，以及异步请求完成后组件已卸载引发的状态更新警告。我来一步步帮你解决：

一、解决description渲染导致的组件崩溃 #

你当前的初始状态里description是空对象，但当接口请求还在进行中，或者接口返回的response.data.data2是undefined/null时，直接访问description.name会抛出Cannot read property 'name' of undefined的错误，直接导致组件崩溃。

解决办法很简单，给属性访问加上空值安全判断：

• 用ES6可选链操作符（推荐写法，简洁高效）：

<h4>{description?.name || ''}</h4>

• 或者用条件判断包裹（兼容性更好的写法）：

{description && description.name && <h4>{description.name}</h4>}

这样只有当description存在且name属性有效时，才会渲染这个标题，彻底避免空值访问错误。

二、解决Can't perform a React state update on an unmounted component警告 #

这个警告的根源是：当组件已经被卸载（比如用户切换了页面），但之前发起的axios请求还在后台运行，请求完成后调用setState就会触发这个警告。我们可以通过两个步骤解决：

1. 在组件中添加挂载状态标记，确保只有组件挂载时才执行setState
2. 在组件卸载时取消未完成的axios请求

修改你的Search组件代码如下：

class Search extends Component {
  constructor() {
    super()
    this.state = { query: '', results: {}, spinning: false, description: {} };
    this.cancel = ''
    this.isMounted = false; // 添加组件挂载状态标记
  }

  componentDidMount() {
    this.isMounted = true; // 组件挂载时标记为已挂载
  }

  componentWillUnmount() {
    this.isMounted = false; // 组件卸载时标记为未挂载
    if (this.cancel) {
      this.cancel.cancel(); // 取消未完成的axios请求
    }
  }

  /* take input query from user */
  performSearch = (query) => {
    const url = `url`
    if (this.cancel) {
      this.cancel.cancel();
    }
    this.cancel = axios.CancelToken.source();
    axios.get(url, { cancelToken: this.cancel.token })
      .then(response => {
        // 只有组件处于挂载状态时才更新状态
        if (this.isMounted) {
          this.setState({ results: response.data.data1, spinning: false, description: response.data.data2 })
        }
        console.log(response)
      }).catch(err => {
        if (axios.isCancel(err)) {
          console.log('Request canceled: ', err.message);
        } else {
          console.log('Error: ', err.message);
          // 同样判断组件是否挂载，再更新状态
          if (this.isMounted) {
            this.setState({ spinning: false })
          }
        }
      })
  }

  // handleInputChange、showSearchResult、render方法保持不变
}

这样修改后，既避免了空值访问导致的组件崩溃，也彻底解决了异步请求完成后组件已卸载的状态更新警告。

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