从 axios.get 返回的承诺 [重复]

Question

这是一个发出 Axios.get() 请求的函数：

 const mentorName = (value) => {
    try {
      const res = Axios.get(
        `${BASE_URL}/api/v1/consultations/${value}`
      )
      if (res.status !== 200 || res.data.status !== "success") {
        console.log(res)
        return
      }
    } catch (error) {
      console.log(error)
    }
  }

以下是控制台的输出：

Please Click here to see console output

现在，我想访问 res.data.data.consultant 但是当我尝试这样做时。它说 res.data 无效。这可能是因为它包含在一个承诺中。请帮我告诉如何访问它？？？

编辑：

按照建议使用 async/await：

 const mentorName = async (value) => {
    try {
      const res = await Axios.get(
        `${BASE_URL}/api/v1/consultations/${value}`
      )
      if (res.status !== 200 || res.data.status !== "success") {
        console.log(res)
        return
      }
    } catch (error) {
      console.log(error)
    }
  } 

Async/await 给出以下错误： 对象作为 React 子级无效（找到：[object Promise]）。

编辑 2：

mentorName 在 array.map((row, index)) 中使用。我很确定调用该函数没有任何问题。

<TableCell align="left">
   {mentorName(row.consultantID)}
</TableCell>

Answer 1

我已经发布了一个解决方案来解决您的问题。不过可以查看this的帖子更详细的了解解决方案。

 const mentorName = async (value) => {
    try {
      const res = await Axios.get(
        `${BASE_URL}/api/v1/consultations/${value}`
      )
      if (res.status !== 200 || res.data.status !== "success") {
        console.log(res)
        return 'N/A'
      }
      return res.data.name;
    } catch (error) {
      return 'N/A'
    }
  }

使用 React Hooks

​​​

class App extends Component {
  constructor() {
    super();
    this.state = { row: { consultantID: 123 } };
  }
  componentDidMount() {
      const consultantID = this.state.row;
      mentorName(consultantID).then((name) => {
        this.setState({
            ...this.state,
            row: { ...this.state.row, name }
        });
    });
  }
  render() {
    return (
        <TableCell align="left">
           {row.name}
        </TableCell>
    );
  }
}

反应 useState() 方法

docs

   const App = (props) => {
        const [row, setRow] = useState({ consultantID: 123, name: 'N/A' });
    
     mentorName(row.consultantID).then(name =>setRow({
        ...row,
        name,
    }))
    
    return (
       <TableCell align="left">
           {row.name}
        </TableCell>
    )
}