在反应应用程序的函数调用中使用时，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) {&nbsp; &nbsp; return axios({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; method: "POST",&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url:"hashroomname.php",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; roomname: title&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}).then((response) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(response.data);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return response.data;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }).catch((error) => {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return error;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;});}但这不会真正起作用。您不能将承诺嵌入到 中<Text>，您需要将其提升到外部状态例如const [ data, setData ] = useState(null)useEffect(() => {&nbsp; &nbsp;_toRoomName(title)&nbsp; &nbsp; &nbsp;.then(response => {&nbsp; &nbsp; &nbsp; &nbsp;setData(response)&nbsp; &nbsp; &nbsp;})}, [])return (&nbsp; <Text className = 'titled'>&nbsp; &nbsp; {data}&nbsp; </Text>)nowdata在加载<Text>之前为空，在有数据之前为空

Answer 2

解决方案是：1）使您的功能异步。async function _toRoomName(title) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const axios = require('axios');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; axios({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; method: "POST",&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url:"hashroomname.php",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; roomname: title&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}).then((response) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(response.data);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return response.data;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }).catch((error) => {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return error;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;});&nbsp; &nbsp; }2）将您的函数移动到 componentDidMount() 并将结果存储在状态中。在渲染方法中使用该状态。componentDidMount() {const axios = require('axios');axios({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; method: "POST",&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url:"hashroomname.php",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; roomname: title&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}).then((response) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.setState({state:response.data})&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }).catch((error) => {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return error;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;});}