React Native，组件异常

Question

我对 React Native 比较陌生。我正在尝试从本地 json 服务器 api 绑定数据。当我为我的 EventList 使用类组件时它工作正常，但是为了在 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>
  );
}

EventList.js

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}
    />
  );
}

db.json

{
  "events": [
    {
      "title": "Release RN course",
      "date": "2021-06-15T00:00:00.000Z",
      "id": "05dafc66-bd91-43a0-a752-4dc40f039144"
    },
    {
      "title": "Demo a new app",
      "date": "2021-09-29T13:45:18.000Z",
      "id": "001c9b6d-00a9-465c-a2d3-afb7176a0a87"
    },
    {
      "title": "Go on holiday",
      "date": "2021-05-18T08:09:24.000Z",
      "id": "4cdbe78f-54df-4769-bf3b-02a930161ec5"
    },
    {
      "title": "Come back from holiday",
      "date": "2021-05-25T10:09:24.000Z",
      "id": "81066e94-5e2a-410a-986c-67dcc72d3a82"
    }
  ]
}

EventCard.js

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>
      </>
    );
  }
}

读取错误

TypeError: (0, _react.default) is not a function. (In '(0, _react.default)([])', '(0, _react.default)' is an instance of Object)

This error is located at:
    in EventList (at SceneView.tsx:122)
    in StaticContainer
    in StaticContainer (at SceneView.tsx:115)
    in EnsureSingleNavigator (at SceneView.tsx:114)
    in SceneView (at useDescriptors.tsx:153)
    in RCTView (at View.js:34)
    in View (at CardContainer.tsx:245)
    in RCTView (at View.js:34)
    in View (at CardContainer.tsx:244)
    in RCTView (at View.js:34)
    in View (at CardSheet.tsx:33)
    in ForwardRef(CardSheet) (at Card.tsx:573)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:555)
    in PanGestureHandler (at GestureHandlerNative.tsx:13)
    in PanGestureHandler (at Card.tsx:549)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:544)
    in RCTView (at View.js:34)
    in View (at Card.tsx:538)
    in Card (at CardContainer.tsx:206)
    in CardContainer (at CardStack.tsx:623)
    in RCTView (at View.js:34)
    in View (at Screens.tsx:84)
    in MaybeScreen (at CardStack.tsx:616)
    in RCTView (at View.js:34)
    in View (at Screens.tsx:54)
    in MaybeScreenContainer (at CardStack.tsx:498)
    in CardStack (at StackView.tsx:462)
    in KeyboardManager (at StackView.tsx:458)
    in RNCSafeAreaProvider (at SafeAreaContext.tsx:74)
    in SafeAreaProvider (at SafeAreaProviderCompat.tsx:42)
    in SafeAreaProviderCompat (at StackView.tsx:455)
    in RCTView (at View.js:34)
    in View (at StackView.tsx:454)
    in StackView (at createStackNavigator.tsx:87)
    in StackNavigator (at App.js:13)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:409)
    in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:91)
    in ThemeProvider (at NavigationContainer.tsx:90)
    in ForwardRef(NavigationContainer) (at App.js:12)
    in App (created by ExpoRoot)
    in ExpoRoot (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)

Answer 1

import useState, { useEffect } from "react";

错了，应该是-

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

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

问题是您正在导入 React 并将其别名为 useState 并尝试像 useState 一样使用它