Question

我正在创建一个将在着陆页上显示的React组件。该组件将显示后台的字符串。如果字符串包含特定链，例如#age#，则会触发ajax请求以获取用户的年龄，然后将其替换为#age#。

我的问题是，即使我可以访问我的字符串，它也可以使用我自己创建的字符串进行某些测试，但是当我使用this.state时，它并不起作用，并说它是＆＃39;未定义。我也无法使用any function whatsoever。

到目前为止我是这样做的：

import React from 'react';

export default class homeLanding extends React.Component {

    state = {
        settings_data: [],
        user_data: [],
    };

    componentDidMount() {
        if(localStorage.getItem('settings_data') === null) {
            $.ajax({
                url: '/settings',
                method: 'GET',
                dataType: 'json',
                success: function(data){
                    self.setState({settings_data: data});
                    localStorage.setItem('settings_data', JSON.stringify(data));
                }
            });
        }
        else {
            this.setState({settings_data: JSON.parse(localStorage.getItem('settings_data'))});
        }

    }

    render() {

        let welcome_title = this.state.settings_data.welcome_title; 
        // returns "welcome to site"

        if(welcome_title.includes('site')) {
            console.log('yaaaaaaay');
        } // error, cannot read includes of undefined
 return (
            <div className="col-md-10 main">
                <h1>{this.state.settings_data.welcome_title}</h1>
                <!-- Displays correctly the title -->
            </div>
        )
    }
}

我的问题如下：为什么它不起作用，我怎么能这样做？我错过了什么吗？

Answer 1

Ajax是异步。虽然你在componentDidMount 开始你的ajax调用（好吧，也许;一分钟内更多），然后完成。它结束了。

因此，如果componentDidMount启动了呼叫（如果您尚未在本地存储中设置），然后调用render，则您尝试使用this.state.settings_data.welcome_title当this.state.settings_data仍然是其初始值[]时，它没有welcome_title。

render应该处理你还没有数据的情况，然后处理你的情况，例如：

if (typeof welcome_title === "undefined") { // Or your favorite way of checking
    // ...you don't have it yet...
} else {
    // ...you have it and it isn't blank...
}

另外：您在self的ajax回调中使用了componentDidMount，但没有在任何地方设置它。这不是你收到错误的原因，但这可能就是为什么你会得到你的下一个错误（你无法调用setState）。< / p>

您可以使用箭头功能代替this：

componentDidMount() {
    if(localStorage.getItem('settings_data') === null) {
        $.ajax({
            url: '/settings',
            method: 'GET',
            dataType: 'json',
            success: data => {                                               // ***
                this.setState({settings_data: data});                        // ***
                localStorage.setItem('settings_data', JSON.stringify(data));
            }
        });
    }
    else {
        this.setState({settings_data: JSON.parse(localStorage.getItem('settings_data'))});
    }
}

Answer 2

jquery没有被定义

npm install jquery

import {$,jQuery} from 'jquery'; window.$ = $; window.jQuery = jQuery;

然后使用

$.ajax({ url: '/settings', method: 'GET', dataType: 'json', success: function(data){ self.setState({settings_data: data}); localStorage.setItem('settings_data', JSON.stringify(data)); } });

你可以使用或使用 https://www.npmjs.com/package/axios

无法阅读＆＃34;包括＆＃34;未定义的，而它是定义的

2 个答案: