為什么我得到失敗的道具型別：提供給“LottieView”的“object”型別的無效道具“onAnimationFinish”，需要一個“功能”

我很確定正在為 LottieView 組件提供一個功能，但收到上述控制臺警告錯誤：失敗的道具型別：提供給onAnimationFinish的型別無效的道具，預期為. objectLottieViewfunction，告訴我我提供了一個物件。下面是我與該問題相關的代碼的一部分：

import React from "react";
import { View, StyleSheet, Modal } from "react-native";
import * as Progress from "react-native-progress";
import LottieView from "lottie-react-native";

import colors from "../config/colors";

function UploadScreen(onDone, progress = 0, visible = false) {
  return (
    <Modal visible={visible}>
      <View style={styles.container}>
        {progress < 1 ? (
          <Progress.Bar
            color={colors.primary}
            progress={parseInt(progress)}
            width={200}
          />
        ) : (
          <LottieView
            autoPlay
            loop={false}
            onAnimationFinish={onDone}
            source={require("../assets/animations/done.json")}
            style={styles.animation}
          />
        )}
      </View>
    </Modal>
  );
}

const styles = StyleSheet.create({
  animation: { width: 150 },
  container: {
    alignItems: "center",
    flex: 1,
    justifyContent: "center",
  },
});

export default UploadScreen;

使用 UploadScreen 組件的組件如下：

import { StyleSheet } from "react-native";
import React, { useState } from "react";
import * as Yup from "yup";

import {
  Form,
  FormField,
  FormImagePicker,
  FormPicker as Picker,
  SubmitButton,
} from "../components/forms";
import listingsApi from "../api/listings";
import Screen from "../components/Screen";
import CategoryPickerItem from "../components/CategoryPickerItem";
import useLocation from "../custom_hooks/useLocation";
import UploadScreen from "./UploadScreen";

const validationSchema = Yup.object().shape({
  title: Yup.string().required().min(1).label("Title"),
  price: Yup.number().required().min(1).max(10000000).label("Price"),
  description: Yup.string().label("Description"),
  category: Yup.object().required().nullable().label("Category"),
  images: Yup.array().min(1, "Please select at least one image!"),
});

const categories = [
  {
    backgroundColor: "#fc5c65",
    icon: "floor-lamp",
    label: "Furniture",
    value: 1,
  },
  {
    backgroundColor: "#fd9644",
    icon: "car",
    label: "Cars",
    value: 2,
  },
];

function ListingEditScreen() {
  const userLocation = useLocation();
  const [uploadVisible, setUploadVisible] = useState(false);
  const [progress, setProgress] = useState(0);

  const handleSubmit = async (listing, { resetForm }) => {
    setProgress(0);
    setUploadVisible(true);
    const result = await listingsApi.addListing(
      { ...listing, userLocation },
      (progress) => setProgress(progress)
    );

    if (!result.ok) {
      setUploadVisible(false);
      return alert("Could not save the listing");
    }

    resetForm();
  };

  return (
    <Screen style={styles.container}>
      <UploadScreen
        onDone={() => setUploadVisible(false)}
        progress={progress}
        visible={uploadVisible}
      />
      
    </Screen>
  );
}

export default ListingEditScreen;

uj5u.com熱心網友回復：

你不是在破壞你的道具。第一個引數UploadScreen是整個props物件：

// onDone is your entire props object here.
function UploadScreen(onDone, progress = 0, visible = false) {

添加大括號以拉出特定的道具：

// add the curlies to extract specific props
function UploadScreen({onDone, progress = 0, visible = false}) {

uj5u.com熱心網友回復：

解構道具

function UploadScreen({onDone, progress, visible}) {

標籤：javascript 节点.js 反应 反应式 功能

上一篇：ReactNativeFlatlist沒有加載所有資料

下一篇：避免useState掛鉤在初始化時運行