reactjs - 不知道如何在本机反应中调试这些错误

Question

以下是返回的错误'警告：React.createElement：类型无效 - 期望字符串（对于内置组件）或类/函数（对于复合组件）但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。此错误专门告诉我查看代码中的“日期”和“画布”元素定义。另外，说要检查“应用程序”的渲染方法。

import React, {Component} from 'react';
import "react-native-dates";
import { Dates } from "react-native-dates";
import {moment} from "moment";
import {Chart} from "react-native-chartjs";
import {Canvas} from 'react-native-canvas';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.chart = null;
    this.state = {
      startDate: null,
      endDate: null,
      focusedInput: null,
      dates: []
    };
    this.handleDatesChange = this.handleDatesChange.bind(this);
    this.handleFocusChange = this.handleFocusChange.bind(this);
    this.updateChart = this.updateChart.bind(this);
  }

  componentDidMount() {
    this.chart = new Chart(this.node, {
      type: "line",
      data: {
        labels: [],
        datasets: [
          {
            label: "# of Likes",
            data: [],
            backgroundColor: [
              "rgba(255, 99, 132, 0.2)",
              "rgba(54, 162, 235, 0.2)",
              "rgba(255, 206, 86, 0.2)"
            ]
          }
        ]
      }
    });
  }

  handleDatesChange({ startDate, endDate }) {
    let dates = [];
    for (
      let m = moment(startDate);
      m.diff(moment(endDate), "days") <= 0;
      m.add(1, "days")
    ) {
      dates.push(m.format("YYYY-MM-DD"));
    }
    this.setState({ startDate, endDate, dates }, () => {
      let data = this.randomData(this.state.dates.length);
      this.updateChart(this.state.dates, data);
    });
  }

  handleFocusChange(focusedInput) {
    this.setState({ focusedInput });
  }

  updateChart(labels, data) {
    this.chart.data.labels = labels;
    this.chart.data.datasets[0].data = data;
    this.chart.update();
  }

  randomData(length) {
    let data = [];
    for (let i = 0; i < length; i++) {
      data.push(Math.floor(Math.random() * 100) + 1);
    }
    return data;
  }

  render() {
    return (
      <View style={styles.container} >
        <Dates
          startDateId="startDate"
          endDateId="endDate"
          startDate={this.state.startDate}
          endDate={this.state.endDate}
          onDatesChange={this.handleDatesChange}
          focusedInput={this.state.focusedInput}
          onFocusChange={this.handleFocusChange}
        />
        <Canvas ref={node => (this.node = node)} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#FFFFFF'
  },
}); 

标签： reactjsreact-native

Answer 1

导入您的Dates和Canvas作为默认模块：

import Dates from 'react-native-dates';
import Canvas from 'react-native-canvas';