Question

我的SPA中有一个帐户页面，当前我正在尝试使用数据库中的信息填充该页面。

我已经使用Postman来查看我尝试访问的属性是否可用。以及我可以从同一元素访问另一个属性。

邮递员的JSON

{
    "newsSubscription": {
        "SubscriptionID": "1",
        "ObjectID": "00000000-0000-0000-0000-000000000000",
        "OrganizationNumber": null,
        "CompanyName": null,
        "Active": true,
        "SubscriptionType": 1,
        "ObjectType": 1
    },
    "Subscriptions": [],
    "Email": "email@email.com"
}

我正在使用axios访问API。我可以获取电子邮件地址，但似乎无法访问“有效”的真/假，这将确定该复选框是否已选中。

class Example extends React.Component {
    state = {
        emailAddress: [],
    }
    componentDidMount() {
        axios.get(
            'http://api',
            { withCredentials: true }
        )
        .then(res => {
            const emailAddress = res.data;
            this.setState({ emailAddress });
        })
        //error handling
    }

    render() {
        return (
            // Removed for simplicity
            <Typography>The registered e-mail address for your account is <b>{this.state.emailAddress.Email}</b></Typography>
            <Checkbox
                checked={this.state.emailAddress.newsSubscription.Active}
                value="email_notifications"
                color="primary"
            />
        );
    }
}

我希望API属性“ Active”根据API调用的是/否响应来选中或取消选中该复选框。

Answer 1

请在渲染部分添加

console.log(this.state.emailAddress);

看看会发生什么。关于数据如何到达可能存在一个问题，这就是为什么它失败的原因。

Answer 2

    state = {
        emailAddress: [],
    }

您的状态非常混乱。您的state.emailAddress看起来像是一个数组，但您将其像一个对象一样使用：this.state.emailAddress.newsSubscription。

您的API给您一个对象还是一个数组？我认为您的问题就在这里。

未捕获的TypeError：无法读取未定义的属性“活动”

2 个答案: