标签: axios

当我的图表组件呈现时，由于其初始状态（在 API 响应之前是一个空数组）而出现错误。它会说类似的内容Cannot read property '0' of undefined，因为当组件加载时，它的初始状态是，嗯......一个空数组。所以我想知道是否有办法让组件仅在收到 API 响应后才渲染。

这是父组件：

function InformationPage({
    match: {
        params: { symbol },
    },
}) {

    const [chartData, setChartData] = useState([]); {/*Declaring state*/}

useEffect(() => {  {/*Fetching API response here to set state*/}
    axios
        .get(
            `https://finnhub.io/api/v1/stock/candle?symbol=${symbol}&resolution=15&from=1572651390&to=1602623478&token=xxxxxxxxx`
        )
        .then((res) => {
            console.log(res.data);
            setChartData(res.data);
        })
        .catch((err) => {
            console.log(err);
        });
}, [symbol]);

return (
    
        <Grid item container xs={12} sm={12} md={6} lg={8}>
            {chartData && <QuoteChart chartData={chartData} iex={iex} />}
        </Grid>
    
   );
}
export Default InformationPage;

这是子图表组件，基本上当我从 …

我正在创建一个注册表单以响应验证。我要求的值是用户名、电子邮件、密码+（控制密码）。有关表单的所有内容、验证、错误，如果您单击“注册”，您将进入一个新页面。现在我想将值提取到我的 MySql 数据库中。我成功地将内容放入数据库中，因此链接有效，但我无法获取我在表单中输入的值。

我努力了

onChange={(e) => {
              setUsernameReg(e.target.value);
            }}
(see commented item)

但是当我尝试这个时，我无法在用户名中填写任何内容。除名称外，其他输入的代码（电子邮件、密码）相同。

简而言之，我想将您在文本框中输入的值获取到我的数据库。

代码：FormSignup.js

  import React, { useEffect, useState } from 'react';
    import Axios from 'axios';
    import validate from './validateInfo';
    import useForm from './useForm';
    import './Form.css';
    
    const FormSignup = ({ submitForm }) => {
      const { handleChange, handleSubmit, values, errors } = useForm(
        submitForm,
        validate
      );
    
      const [usernameReg, setUsernameReg] = useState("");
      const [emailReg, setEmailReg] = useState("");
      const [passwordReg, setPasswordReg] = useState("");
    
      Axios.defaults.withCredentials = true;
    
      const register = () => …

我正在使用 axios CDN 链接，但它给出了此错误

Refused to load the script 'https://unpkg.com/axios/dist/axios.min.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

我正在使用哈巴狗模板引擎。这是我的 base.pug 代码：

doctype html
html
    head
        meta(charset='UTF-8')
        meta(name='viewport' content='width=device-width, initial-scale=1.0')
        title Natours |#{title}
        link(rel='stylesheet' href='/css/style.css')
        link(rel='shortcut icon' type='image/png' href='/img/favicon.png')
        link(rel='stylesheet' href='https://fonts.googleapis.com/css?family=Lato:300,300i,700')
    
    body
        //header
        include _header         

        //content
        block content
            h1 this is a placeholder

        //footer
        include _footer  

        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  
        script(src='/js/login.js')  

这是我的login.js

const login=async (email,password)=>{
    try{ …

我的后端代码如下，当我使用Laravel 的blade测试它时，它运行良好。但我无法在 React 前端中使用 Axios 执行相同的操作（请参阅下面的前端代码）。

return (new NewsExport())->download($filename);

我以某种方式从另一个站点找到了一些解决方案：他们更改了后端代码，他们使用该Storage方法返回链接而不是文件。但我不想使用Storage，我想防止过度存储文件（以防前端用户快速单击下载按钮）。

我的问题是如何在前端axios中下载后端返回的文件？

我的前端代码（下面的代码成功下载了一个excel文件，但我认为该文件已损坏，因为当我使用Microsoft Excel测试它时无法打开它）

let response = await newsApi.exportNewsList(payload).then(response => {
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', 'exc.xlsx'); //or any other extension
    document.body.appendChild(link);
    link.click();
});

这是response.data我登录时的截图：