Question

我在Google上找不到答案，所以我虽然你们可能会帮助我。

因此，我尝试了componentWillMount（），componentDidMount（），但在接收到提取的字符串之前，似乎会调用子字符串方法。

import React, { Component } from 'react';
import axios from "axios";

class Home extends Component {
    constructor(props){
        super(props);
        this.state = {
            reminders: [{}],
            test: "test"
        };
    }

    getReminders(){
        fetch('/api/reminder/',{method:"GET"}).then(resp => resp.json()).then(data => 
            this.setState({reminders:data}));
    }

    componentWillMount(){
        this.getReminders();
    };

    render() {
        return (
            <div className="main-table">
                { this.state.reminders.map((x,i) => 
                <div key={i} className="table-item">
                    <div className="item-name">{x.title}</div>
                    <div className="item-content flex">
                        <div className="time">{x.from.substr(11,2)} - {x.to}</div>
                        <div className="location">{x.location}</div>
                    </div>
                </div>) }
            </div>
        );
    }
}

export default Home;

Answer 1

从reminders中的state中取出空对象，以使数组没有初始长度

这使数组开始时的长度为1，并且您在map()中寻找的属性在该特定对象上不存在

    this.state = {
        reminders: [],
        test: "test"
    };

Answer 2

原因是您初始化的699不是空数组，而是空对象数组，这在您访问它时会导致错误您可以使用空数组进行初始化，例如

this.state.reminders

或者您可以添加一些属性，例如this.state = { reminders: [] }最初设置为false，仅在表设置为true后才渲染表，例如：

isRemindersLoaded

JS子字符串不适用于反应获取的字符串

2 个答案: