Блог

как мне справиться с возвращением нуля в запросах на выборку? В конце концов запрос проходит, но по какой-то причине он возвращает кучу нулей, прежде чем получить данные. может ли это быть что-то не так с моим кодом или это просто нормальное поведение при извлечении?

Настройка выборки

 const [subDomains, setSubDomains] = useState(null)
const [website, setwebsite] = useState("twitter.com")

  useEffect(() => {
    async function fetchData() {
    const response = await fetch("api_url=" website,{ 
        headers: {
          "X-Api-Key": "hidden"
        }
      })
      const data = await response.json()
      const subdomains = data["ContributingSubdomain"]
      const convertedsubdomains = Object.keys(subdomains)
      let otherdomains = []
      for(let i=0; i < convertedsubdomains.length; i  ) {
        const subdomains2 = data.ContributingSubdomain[i]["DataUrl"]
        otherdomains.push(subdomains2)
      }
      setSubDomains(otherdomains)
    }
    fetchData()
  }, [website])
 

Затем реквизит поддоменов передается компоненту в виде доменов

 const SubDomains = ({domains}) => {

    
    return (
        <div>
            <div>
                {domains.forEach((e) => 
                    <h2>{e}</h2>
                )}
            </div>
        </div>
    )
}

export default SubDomains
 

Я получаю сообщение об ошибке: ошибка типа: Не удается прочитать свойства null (чтение «forEach»)

Когда я консолю.log(домены), я вижу, что получаю кучу нулей перед получением фактических данных, что, как я предполагаю, вызывает вышеуказанную ошибку. но я не знаю, что я делаю не так, когда запрашиваю данные и передаю их дальше

Я действительно не знаю, почему он возвращает значение null до получения ответа, но поскольку вы инициализировали subDomains значение null, оно вернет значение null для самого первого рендеринга. Но чтобы исправить

Ошибка типа: Не удается прочитать свойства null (чтение «forEach»)

все, что вам нужно сделать, это проверить, имеет ли domains значение, прежде чем сопоставлять значения.

Вы можете изменить эту строку:

 {domains.forEach((e) => 
   <h2>{e}</h2>
)}
 

Для:

 {domains?.forEach((e) => 
   <h2>{e}</h2>
)}
 

Обратите внимание, что я добавил знак вопроса перед доменами. Это необязательный оператор цепочки (?.). Это позволяет считывать значение свойства, расположенного глубоко в цепочке связанных объектов, без необходимости проверять правильность каждой ссылки в цепочке.

Кроме того, почему бы не сопоставить значения, а не forEach . Вот так:

 {domains?.map((domain, index) => 
   <h2 key={index}>{domain}</h2>
)}
 

Если есть идентификаторы, которые поставляются вместе с доменами, вы можете использовать их в качестве ключа вместо индекса.