问题

I need help with a React.js problem.
我需要帮助解决一个React.js问题。

I am making a request with user input on a search bar I am using the hook useDebounce and when the user clears the input field after they got a result back. The array data becomes empty and the map function cannot run on an empty array.
我正在使用搜索栏上的用户输入发出请求，我正在使用useDebounce钩子，当用户在得到结果后清空输入字段时，数组数据变为空，map函数无法在空数组上运行。

How do I check for empty array when the user clears out the input field.
当用户清空输入字段时，我如何检查空数组。

App.jsx

// debounced query
  let {debouncedQuery} = useContext(DataContext)

useEffect(() => {
    // get the images of the breed that is chosen
    const loadByBreed = async (value: string) => {
      if (!debouncedQuery) return
      
      try {
        const response = await fetch(`https://dog.ceo/api/breed/${value}/images`)
        const data = await response.json()
        console.log(data)
        setImagesOfABreed(data.message)
      } catch (error) {
        const err = error as Error
        console.log(err.message)
      }
    }

    loadByBreed(debouncedQuery);

  }, [debouncedQuery])

{ debouncedQuery &&  imagesOfABreed?.length ? imagesOfABreed.map((data) => {
            return (
              <Card key={data} img={data} />
            )
          }) : <p>Nothing</p>}

App.jsx

// 防抖查询
let {debouncedQuery} = useContext(DataContext)

useEffect(() => {
    // 获取所选择品种的图像
    const loadByBreed = async (value: string) => {
      if (!debouncedQuery) return
      
      try {
        const response = await fetch(`https://dog.ceo/api/breed/${value}/images`)
        const data = await response.json()
        console.log(data)
        setImagesOfABreed(data.message)
      } catch (error) {
        const err = error as Error
        console.log(err.message)
      }
    }

    loadByBreed(debouncedQuery);

  }, [debouncedQuery])

{ debouncedQuery &&  imagesOfABreed?.length ? imagesOfABreed.map((data) => {
            return (
              <Card key={data} img={data} />
            )
          }) : <p>Nothing</p>}

(Note: The code remains in English as requested.)

// debounced query
  let {debouncedQuery} = useContext(DataContext)

useEffect(() => {
    // get the images of the breed that is choosen
    const loadByBreed = async (value: string) => {
      if (!debouncedQuery) return
      
      try {
        const response = await fetch(`https://dog.ceo/api/breed/${value}/images`)
        const data = await response.json()
        console.log(data)
        setImagesOfABreed(data.message)
      } catch (error) {
        const err = error as Error
        console.log(err.message)
      }
    }


    loadByBreed(debouncedQuery);

  }, [debouncedQuery])


{ debouncedQuery &&  imagesOfABreed?.length ? imagesOfABreed.map((data) => {
            return (
              <Card key={data} img={data} />
            )
          }) : <p>Nothing</p>}

答案1

得分: 2

问题实际上是在为API调用形成获取URL时出现的。当用户清空输入字段时，该值变为空字符串。因此，URL变成了这样：https://dog.ceo/api/breed//images。请注意URL中的双斜杠，因为空字符串在'value'中。

在这种情况下，API确实提供了响应，但响应中的'message'属性的内容是一个字符串。请注意，数组和字符串原型都有'length'属性。在这种情况下，在渲染组件的UI元素时，条件得到满足，代码尝试在字符串上运行map函数，这就是失败的原因所在。

修复它的一种方法是在'try-catch'块之前添加以下片段：

if(!value) {
    setImagesOfABreed([]);
    return;
}

if(!value) {
    setImagesOfABreed([]);
    return;
}