Javascript 反应本机，组件异常

在那里，我相对来说是个新手。我正在尝试绑定来自本地json服务器api的数据。当我在事件列表中使用类组件时，它工作得很好，但是为了在App.js中集成导航，我将其更改为函数组件，我似乎没有发现错误。你能解释一下这个错误是什么，以及如何阅读和理解它吗。我已经添加了所有必需的代码，谢谢

App.js

import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, View } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator, StackView } from "@react-navigation/stack";
import EventList from "./EventList";

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={EventList} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

import React from "react";
import { FlatList, Text, StyleSheet } from "react-native";
import EventCard from "./EventCard";
import useState, { useEffect } from "react";

export default function EventList() {
  const [events, setEvents] = useState([]);
  const eventsArray = require("./db.json").events.map((event) => ({
    ...event,
    date: new Date(event.date),
  }));

  useEffect(() => {
    setInterval(() => {
      setEvents(
        eventsArray.map((e) => ({
          ...e,
          timer: Date.now(),
        }))
      );
    }, 1000);
  });

  return (
    <FlatList
      style={styles.list}
      data={events}
      renderItem={({ item }) => <EventCard event={item} />}
      keyExtractor={(item) => item.id}
    />
  );
}

import React from "react";
import { Text, View, StyleSheet } from "react-native";
import propTypes from "prop-types";
import { formatDate, getCountdownParts } from "./api";

export default class EventCard extends React.Component {
  state = {};

  componentDidMount() {
    this.setState(this.props.event);
  }

  render() {
    const { days, hours, minutes, seconds } = getCountdownParts(
      this.state.date
    );

    return (
      <>
        <View>
          <View>
            <Text>{formatDate(this.state.date)}</Text>
            <Text>{this.state.title}</Text>
          </View>
        </View>
        <View>
          <View>
            <Text>{days}</Text>
            <Text>DAYS</Text>
          </View>
          <View>
            <Text>{hours}</Text>
            <Text>HOURS</Text>
          </View>
          <View>
            <Text>{minutes}</Text>
            <Text>MINUTES</Text>
          </View>
          <View>
            <Text>{seconds}</Text>
            <Text>SECONDS</Text>
          </View>
        </View>
      </>
    );
  }
}

EventCard.js

import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, View } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator, StackView } from "@react-navigation/stack";
import EventList from "./EventList";

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={EventList} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

import React from "react";
import { FlatList, Text, StyleSheet } from "react-native";
import EventCard from "./EventCard";
import useState, { useEffect } from "react";

export default function EventList() {
  const [events, setEvents] = useState([]);
  const eventsArray = require("./db.json").events.map((event) => ({
    ...event,
    date: new Date(event.date),
  }));

  useEffect(() => {
    setInterval(() => {
      setEvents(
        eventsArray.map((e) => ({
          ...e,
          timer: Date.now(),
        }))
      );
    }, 1000);
  });

  return (
    <FlatList
      style={styles.list}
      data={events}
      renderItem={({ item }) => <EventCard event={item} />}
      keyExtractor={(item) => item.id}
    />
  );
}

import React from "react";
import { Text, View, StyleSheet } from "react-native";
import propTypes from "prop-types";
import { formatDate, getCountdownParts } from "./api";

export default class EventCard extends React.Component {
  state = {};

  componentDidMount() {
    this.setState(this.props.event);
  }

  render() {
    const { days, hours, minutes, seconds } = getCountdownParts(
      this.state.date
    );

    return (
      <>
        <View>
          <View>
            <Text>{formatDate(this.state.date)}</Text>
            <Text>{this.state.title}</Text>
          </View>
        </View>
        <View>
          <View>
            <Text>{days}</Text>
            <Text>DAYS</Text>
          </View>
          <View>
            <Text>{hours}</Text>
            <Text>HOURS</Text>
          </View>
          <View>
            <Text>{minutes}</Text>
            <Text>MINUTES</Text>
          </View>
          <View>
            <Text>{seconds}</Text>
            <Text>SECONDS</Text>
          </View>
        </View>
      </>
    );
  }
}

这是错误的，应该是错误的-

import React, { useState, useEffect } from "react";

（这也结合了react的其他导入，而在“react”的最小值处有两个导入行，您只需要一个）

---

问题是您正在导入React并将其别名为

useState

，并试图像

useState

一样使用它，谢谢。当我们犯了一个愚蠢的错误并且不能理解错误堆栈所说的话时，这是很烦人的。