Javascript 从axios.get返回的承诺

下面是一个发出Axios.get（）请求的函数：

以下是控制台的输出：

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

编辑：

按建议使用异步/等待：

 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子对象无效（找到：[对象承诺]）

编辑2：

名称在array.map（（行，索引））中使用。我很确定调用这个函数没有什么错

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

{mentorName（row.consultantID）}

我已经发布了一个解决您问题的解决方案。但你可以查看帖子，更详细地了解解决方案

 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'
    }
  }

使用反应钩 ​

类应用程序扩展组件{
构造函数（）{
超级（）；
this.state={row:{consultantID:123}}；
}
componentDidMount（）{
const consultantID=this.state.row；
导师姓名（顾问）。然后（（姓名）=>{
这是我的国家({
…这个州，
行：{…this.state.row，name}
});
});
}
render（）{
返回(
{row.name}
);
}
}

React useState（）方法

const-App=（道具）=>{
const[row，setRow]=useState（{consultantID:123，name:'N/A'}）；
顾问名称（row.consultantID）。然后（name=>setRow({
一行
名称
}))
返回(
{row.name}
)
}

要使用axios，您需要使用aysnc/await。尝试将

mentorName

转换为异步函数，然后等待

Axios。获取

？否！在编写async并等待后，程序给出错误“对象作为React子对象无效（找到：[object Promise]）”@ParasBansal我的建议不是答案。请编辑此问题以显示您已尝试的内容。我已阅读此问题。请重新检查。给出的错误与示例中的代码无关。您可能正在将对象直接转储到react组件中。“使用react挂钩”标题下的示例未使用react挂钩？是。这不是完整的代码。我已经放了一个参考文件。不，我的意思是它没有使用react钩子

useState

是react-hook我认为不需要使用react-hook来更新状态。在

then（）

fn中，我正在更新状态。检查这个

 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'
    }
  }

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>
    );
  }
}

   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>
    )
}