在反应应用程序的函数调用中使用时，Axios post 不返回数据

Question

我在我的反应应用程序中使用 axios 发布请求。发布请求工作正常，我在控制台日志中获得响应数据。但我想返回该数据以在网页中呈现。任何帮助是极大的赞赏。谢谢你。这是我发出 axios 请求的函数。function _toRoomName(title) {const axios = require('axios');axios({              method: "POST",               url:"hashroomname.php",              data: {                roomname: title              }           }).then((response) => {                console.log(response.data);                return response.data;          }).catch((error) => {               return error;           });}这是我的渲染方法，需要渲染返回的响应。<Text className = 'titled'>    { _toRoomName(title) } //I want result here </Text>

Answer 1

您在return函数调用中缺少 a - 您是从内部then而不是外部承诺返回

function _toRoomName(title) {

    return axios({

              method: "POST", 

              url:"hashroomname.php",

              data: {

                roomname: title 

             }

           }).then((response) => {

                console.log(response.data);

                return response.data;

          }).catch((error) => { 

              return error;

           });

}

但这不会真正起作用。您不能将承诺嵌入到 中<Text>，您需要将其提升到外部状态

例如

const [ data, setData ] = useState(null)

useEffect(() => {

   _toRoomName(title)

     .then(response => {

       setData(response)

     })

}, [])

return (

  <Text className = 'titled'>

    {data}

  </Text>

)

nowdata在加载<Text>之前为空，在有数据之前为空

Answer 2

解决方案是：1）使您的功能异步。

async function _toRoomName(title) {

          const axios = require('axios');

            axios({

                  method: "POST", 

                  url:"hashroomname.php",

                  data: {

                    roomname: title 

                 }

               }).then((response) => {

                    console.log(response.data);

                    return response.data;

              }).catch((error) => { 

                  return error;

               });

    }

2）将您的函数移动到 componentDidMount() 并将结果存储在状态中。在渲染方法中使用该状态。

componentDidMount() {

const axios = require('axios');

axios({

              method: "POST", 

              url:"hashroomname.php",

              data: {

                roomname: title 

             }

           }).then((response) => {

                this.setState({state:response.data})

                

          }).catch((error) => { 

              return error;

           });

}