TypeError: props.price.toFixed is not a function. (In 'props.price.toFixed(2)', 'props.price.toFixed' is undefined)

Question

也许我收到这个错误是因为传递的道具是一个字符串，toFixed() 无法处理它，但我正在尝试传递数字，为此，我还在 [= 之后添加了 + 13=] 像这样 +pass 转换成数字，但我仍然收到此错误。

ProductItem.js:

const ProductItem = (props) => {
  return (
    <View style={styles.product}>
      <View style={styles.Touchable}>
        <TouchableNativeFeedback onPress={props.onSelect} useForeground>
          <View>
            <View style={styles.imageContainer}>
              <Image style={styles.image} source={{ uri: props.image }} />
            </View>
            <View style={styles.details}>
              <Text style={styles.title}>{props.title}</Text>
              <Text style={styles.price}>
                {props.price.toFixed(2)}  //Here I am getting this error
              </Text>
            </View>
            <View style={styles.actions}>{props.children}</View>
          </View>
        </TouchableNativeFeedback>
      </View>
    </View>
  );
};

在上面的文件中，我遇到了这个错误。

EditUserProduct.js :

import React, { useState, useCallback, useEffect } from "react";
import {
  View,
  ScrollView,
  Text,
  TextInput,
  Platform,
  StyleSheet,
} from "react-native";
import { useSelector, useDispatch } from "react-redux";
import { HeaderButtons, Item } from "react-navigation-header-buttons";

import CustomHeaderButton from "../../components/UI/HeaderButton";
import * as productActions from "../../store/actions/products";

const EditProductScreen = (props) => {
  const dispatch = useDispatch();
  const prodId = props.navigation.getParam("productId");
  const editedProduct = useSelector((state) =>
    state.products.userProducts.find((prod) => prod.id === prodId)
  );
  console.log(editedProduct);

  const [title, setTitle] = useState(editedProduct ? editedProduct.title : "");
  const [imageUrl, setImageUrl] = useState(
    editedProduct ? editedProduct.imageUrl : ""
  );
  const [price, setPrice] = useState("");
  const [description, setDescription] = useState(
    editedProduct ? editedProduct.description : ""
  );

  const submitHandler = useCallback(() => {
    if (editedProduct) {
      dispatch(
        productActions.updateProduct(prodId, title, description, imageUrl)
      );
    } else {
      dispatch(
        productActions.createProduct(
          prodId,
          title,
          description,
          imageUrl,
          +price
        )
      );
    }
  }, [dispatch, prodId, title, description, imageUrl, price]);

  useEffect(() => {
    props.navigation.setParams({ submit: submitHandler });
  }, [submitHandler]);

  return (
    <ScrollView>
      <View style={styles.form}>
        <View style={styles.formControl}>
          <Text style={styles.label}>Title</Text>
          <TextInput
            style={styles.input}
            value={title}
            onChangeText={(text) => setTitle(text)}
          />
        </View>
        <View style={styles.formControl}>
          <Text style={styles.label}>Image URL</Text>
          <TextInput
            style={styles.input}
            value={imageUrl}
            onChangeText={(text) => setImageUrl(text)}
          />
        </View>
        {editedProduct ? null : (
          <View style={styles.formControl}>
            <Text style={styles.label}>PRICE</Text>
            <TextInput
              style={styles.input}
              value={price}
              onChangeText={(text) => setPrice(text)}
            />
          </View>
        )}
        <View style={styles.formControl}>
          <Text style={styles.label}>Description</Text>
          <TextInput
            style={styles.input}
            value={description}
            onChangeText={(text) => setDescription(text)}
          />
        </View>
      </View>
    </ScrollView>
  );
};

EditProductScreen.navigationOptions = (navigationData) => {
  const submitFN = navigationData.navigation.getParam("submit");
  return {
    headerTitle: navigationData.navigation.getParam("productId")
      ? "Edit Product"
      : "Add Product",
    headerRight: () => (
      <HeaderButtons HeaderButtonComponent={CustomHeaderButton}>
        <Item
          title="Save"
          iconName={
            Platform.OS === "android" ? "md-checkmark" : "ios-checkmark"
          }
          onPress={submitFN}
        />
      </HeaderButtons>
    ),
  };
};

在上面的文件中，我添加了 +price 以将其转换为数字，但仍然出现此错误。

我也试过 parseFloat(props.price.toFixed(2)) 然后我得到 NaN.

如何解决这个错误？

Answer 1

首先确认props.price定义：

console.log("price:",props.price)

如果定义了，看类型：

console.log("typeof price", typeof props.price)

我假设它的类型是字符串：

         <Text style={styles.price}>
            {Number(props.price).toFixed(2)} 
          </Text>

parseFloat(props.price.toFixed(2)) 这给你 Nanindicates that props.price.toFixed(2) cannot be converted to number, most likely it is undefined that is why you get Nan

TypeError: props.price.toFixed is not a function. (In 'props.price.toFixed(2)', 'props.price.toFixed' is undefined)

TypeError: props.price.toFixed is not a function. (In 'props.price.toFixed(2)', 'props.price.toFixed' is undefined)

javascript

tofixed

reactjs

react-native

react-props