Question

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

2020-07-01

2082

javascript reactjs react-native axios

我在我的 React 应用程序中使用 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 - 您是从 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>
)

现在 data 将为空，直到加载为止，并且 <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() 并将结果存储在 state 中。在 render 方法中使用该状态。

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