如何在 React 中使用 axios 发布请求使函数等待答案

【问题标题】：How to make function wait with axios post request in React如何在 React 中使用 axios 发布请求使函数等待
【发布时间】：2020-12-25 05:57:07
【问题描述】：

我有一个表单和一个按钮。我的问题是：

我使用布尔状态作为指示符来玩 URL 链接
但是在axios请求返回响应并将结果设置为返回的json之前，newUrl被设置为true 所以当我将 newURL 设置为 true 时，它运行到 TypeError: Cannot read property 'data' of undefined

在 axios 请求之前等待并大喊大叫解析错误：不能在异步函数之外使用关键字 'await'

const MyComp = () =>{
const [newUrl, setNewUrl] = useState(false);
const inputText = useRef(null);
let result;

const fetchVideo = () => {
  const form = inputText.current;
  const inputValue = `${form['textToVideo'].value}`;
  dataVideo.timeline.scenes[0].text[1].val[0].text = inputValue;
  axios.post(
    'URL',jsonFILE,{
      headers: {
        Authorization:
          'Basic (authorization token)',
      }
    }
  ).then(res =>{ result = res;})
  .catch(err => console.log(err))
  if(result){
    console.log(result.data.output.video[0].links.url)
    console.log(result.data)
  }
  setNewUrl(true)
  console.log(newUrl);
 }
return (
  <section >
    <div>
      <div>           
         <div>
          <h1>Automated Video Ads For Your Shopify Store</h1>
          <h3>Enter your store discount below</h3>
          <div>
            <form ref={inputText}  >
              <input className="input" type="textContent" name="textToVideo"  placeholder="e.g Up to 30%&hellip;" />
            </form>
            <div>
              <button onClick={fetchVideo} className="button button-primary button-block button-shadow" type="submit">Show Me</button>
            </div>
          </div>
        </div>
        <div>
          <HeroIllustration
          url={newUrl ? result.data.output.video[0].links.url : "PRIMARY_URL"}>                  
          </HeroIllustration>              
        </div> 
    </div>
  </div>
</section>

) }

有什么建议吗？

【问题讨论】：

首先，如果你的代码sn-p中没有使用await，怎么会出现解析错误呢？其次，这是什么语法：**result = res;**？你想用它来达到什么目的？
与 xyz 他试图将代码的一部分加粗..这通常发生在您尝试将问题中的某些部分加粗时..

标签： javascript reactjs ajax axios

【解决方案1】：

您是否尝试过使用异步函数？

const MyComp = () =>{
const [newUrl, setNewUrl] = useState(false);
const inputText = useRef(null);
let result;

const fetchVideo = async () => {
  const form = inputText.current;
  const inputValue = `${form['textToVideo'].value}`;
  dataVideo.timeline.scenes[0].text[1].val[0].text = inputValue;
  await axios.post(
    'URL',jsonFILE,{
      headers: {
        Authorization:
          'Basic (authorization token)',
      }
    }
  )

【讨论】：