Question

我唯一可以找到（在线）导入ajax的方法是通过HTML脚本标签<script ... </script>，但是我的webapp的构建没有HTML文件。这是一种奇怪的情况，因为我做了一个（带有重要图标，例如favicon参考和网站名称），但是尽管我的应用程序已设置，但它似乎并不关心index.html。

它由Koa，Next，React和Material-UI构建。我绝不是专业人士，但我是使用Koa，Next和React构建的先前应用程序为该应用程序建模的，该应用程序确实具有正常工作的index.html，但是如果没有它，该应用程序就可以正常工作，我仍然无法终生我的代码应该在何时何地请求它。最好的情况是，我不需要index.html来使AJAX正常工作，但是如果有人知道让index.html正常工作时我缺少什么，那么我无所不能。

这是我当前的存储库外观：

[-components
[---Component1
[---Component2
[---Component3
[---Component...
[-node_modules
[-pages
[---index.js
[-public
[---favicon.png
[---index.html
[-app.js
[-package.json

有问题的代码是@ index.js

class Index extends React.Component {
    state = {
        loading: false,
    };

    componentDidMount() {
        var jqXHR = $.ajax({
            type: "POST",
            url: "/login",
            async: false,
            data: { mydata: [Cookies.get('links'), Cookies.get('numSentences')] }
        });
        Cookies.set('final', jqXHR.responseText);
    }

    handleClickLoading = () => {
        this.setState(state => ({
            loading: true,
        }));
        this.componentDidMount();
    };

    render() {
        const {loading} = this.state;
        return (
            <div>
                <AppBar/>
                <Block/>
                <Card>
                    <CardActions>
                    <Button size="large"
                            fullWidth={true}
                            onClick={this.handleClickLoading}>Submit</Button>
                    </CardActions>
                </Card>
                <Fade
                    in={loading}
                    unmountOnExit
                    >
                <BottomBar/>
                </Fade>
            </div>

        )
    }
}

export default Index;

此代码在加载 ReferenceError：未定义$ 时会立即崩溃。这是在我进行了一些故障排除之后，最初是在handleClickLoading（）函数中包含了这样的AJAX代码，直到触发按钮onClick事件时它才会崩溃：

...
class Index extends React.Component {
    state = {
        loading: false,
    };

    handleClickLoading = () => {
        this.setState(state => ({
            loading: true,
        }));
        var jqXHR = $.ajax({
            type: "POST",
            url: "/login",
            async: false,
            data: { mydata: [Cookies.get('links'), Cookies.get('numSentences')] }
        });
        Cookies.set('final', jqXHR.responseText);
    };

    render() {
...

作为参考，我可以键入“ $ .ajax”，Pycharm会自动完成并告诉我期望的参数，但是它最终总是带有下划线并标记为“缺少导入语句”。如何导入？

Answer 1

代替ajax的axios npm模块可以做到这一点，并且可以很好地与react一起尝试try axios，然后简单地使用ajax

here is link for npm module

没有办法在React组件中运行AJAX脚本吗？

1 个答案: