React中如何将axios POST请求的console.log返回内容展示在模态框中

1 先解决alert显示undefined的问题 #

你代码中alert(console.log(res.data.failed))写法错误，console.log()方法本身没有返回值，执行后默认返回undefined，因此alert拿到的内容就是undefined。如果要使用alert弹出对应内容，直接修改为：

alert(res.data.failed)

2 实现模态框展示响应数据的方案 #

步骤1：在state中新增模态框相关状态 #

用来控制模态框显隐、存储要展示的响应数据：

state = {
  // 保留你原有状态：avatar、uploadPercentage等
  modalVisible: false, // 控制模态框显隐
  responseData: null // 存储接口返回的完整响应数据
}

步骤2：请求成功后更新state，打开模态框 #

修改axios请求的回调逻辑，不要用alert，将返回数据存入state后触发模态框显示：

axios.post("https://api_use.com/aof/upload/broker/existing/user/", data, options).then(res => { 
    console.log(res)
    this.setState({ 
      avatar: res.data.url, 
      uploadPercentage: 100,
      responseData: res.data, // 存储返回数据
      modalVisible: true // 打开模态框
    }, ()=>{
      setTimeout(() => {
        this.setState({ uploadPercentage: 0 })
      }, 1000);
    })
})

步骤3：在render方法中编写模态框渲染逻辑 #

根据state中的模态框状态控制渲染，下方给出原生实现的模态框示例，你也可以直接使用Ant Design、Element等UI库的模态框组件：

render() {
  // 模态框遮罩样式，可根据需求调整
  const modalMaskStyle = {
    position: 'fixed',
    top: 0,
    left: 0,
    width: '100vw',
    height: '100vh',
    backgroundColor: 'rgba(0,0,0,0.5)',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 999
  }
  // 模态框内容区域样式
  const modalContentStyle = {
    backgroundColor: '#fff',
    padding: '24px',
    borderRadius: '8px',
    minWidth: '350px'
  }

  return (
    <div>
      {/* 此处保留你原有页面的其他渲染内容 */}

      {/* 模态框渲染逻辑 */}
      {this.state.modalVisible && this.state.responseData && (
        <div style={modalMaskStyle}>
          <div style={modalContentStyle}>
            <h3>请求响应结果</h3>
            <div style={{margin: '16px 0'}}>
              <p>上传文件地址：{this.state.responseData.url}</p>
              <p>失败提示：{this.state.responseData.failed || '无'}</p>
              {/* 可根据需要自行添加其他要展示的返回字段 */}
            </div>
            <button 
              onClick={() => this.setState({modalVisible: false})}
              style={{padding: '6px 12px', cursor: 'pointer'}}
            >
              关闭
            </button>
          </div>
        </div>
      )}
    </div>
  )
}

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