Question

无法读取以下代码中未定义的属性“split”

2021-02-18

1296

javascript html reactjs

为什么这里的 split 属性未定义？我通过 axios 从我的产品 api 获取产品，我收到了具有一些属性（名称、说明等）的 json 数据

const [product, setProduct] = useState({});
let substrings=[];
  useEffect(() => {
    const getProduct = async () => {
      try {
        const res = await axios.get(`/products/${props.match.params.id}`);
        setProduct(res.data);
     
      } catch (error) {
        console.error(error);
      }
    };
    getProduct();
    //eslint-disable-next-line
  }, []);
  
  const substrings = product.description.split(".");

This is the json that we get from products/id
{"_id":"1","name":"Mangoes","image":"https://drive.google.com/thumbnail?id=1Iq2F4fYxDi7HdX-IJcRuON-CbNuK-pxd","description":"This sweet and fresh mangoes make your day sweet","category":"Fruits","keywords":"fruits","price":120,"countInStock":0,"content":""}

而这里运行正常

const [product, setProduct] = useState({});
const [desc,setDesc]=useState("");
  useEffect(() => {
    const getProduct = async () => {
      try {
        const res = await axios.get(`/products/${props.match.params.id}`);
        setProduct(res.data);
        setDesc(res.data.description);
      } catch (error) {
        console.error(error);
      }
    };
    getProduct();
    //eslint-disable-next-line
  }, []);
  
  const substrings = desc.split(".");

谁能告诉我们为什么会这样？

Answer 1

我认为在加载产品之前，您的产品值为 null 或 {}，因此当您使用 product.description 时，该值将未定义。您可以使用：

const substrings = (product?.description || '').split(".");

Answer 2

我认为这里的问题在于您使用 useState 声明 product 的方式。对于第二部分，您直接声明 description ，因此当您拆分它时，它可能是一个空字符串或您声明的任何内容，但不是未定义的。

但对于第一部分，您只声明了 product 变量，没有 description 属性。因此，在获取之前，当您尝试拆分 product.description 时，它是未定义的，并在获取后立即变为一个值。

为了修复它，您可以像这样声明产品：

const [product, setProduct] = useState({ description: "" }) 或者只是简单地使用 ? 运算符，如下所示： const substrings = product.description?.split(".");

此外，可能还存在问题，因为您首先将 substrings 声明为空数组，然后再次将其声明为 const 。