Question

我开始学习反应，并且在理解自定义反应挂钩时遇到了麻烦。我想创建一个钩子，在这里我可以传递从API调用接收到的数组，并创建另一个具有排序数据的数组，以便于访问。我的第一个问题是，当我导入钩子时，它被称为无限时间，直到应用崩溃为止，因此我必须添加if语句。现在，当我尝试使用setArray并通过API调用传递响应时，它将返回undefined。我写的函数效果很好，但是我不知道如何将其用作钩子。我寻找了一些教程/文档，但我无法真正理解：为什么我的钩子被调用了无数次，为什么它的返回未定义。

在此先感谢您的回答。

App.js

import React, {useState, useEffect} from 'react';
import {useFilter} from "./useFilter";
import './App.css';

function App() {


  const [weather, setWeather] = useState([]);
  const [query, setQuery] = useState("");
  const [searchValue, setSearchValue] = useState("");
  const [filteredArray, setArray] = useFilter([]);

  useEffect(() => {
    if(query !== ""){
      fetchCall();
    }
  },[query]);
  
  const fetchCall = async () =>{
    const request = await fetch(`http://api.openweathermap.org/data/2.5/forecast?q=${query}&appid=${APP_KEY}&units=metric`);
    const response = await request.json();
    setArray(response.list);
  }

  const search = (e) =>{
    setSearchValue(e.target.value);
  }

  const submitValue = e =>{
    e.preventDefault();
    setQuery(searchValue);
  }

  return (
    <div className="App">
      <form onSubmit={submitValue}>
        <input type="text" placeholder="enter city name" onChange={search}></input>
        <button type="submit">getWeather</button>
      </form>
    </div>
  );
}

export default App;

我做的钩子

import {useState} from 'react';

export const useFilter = response =>{

    console.log(response);

    const [value, setValue] = useState(response);

    return [value, response => {
        const getDtText = (value) =>{
            return value.split('').slice(0,10).join('');
          }
      
          let fiveDaysArray = [];
          let tempArr = [];
          let tempVal = response[0];
          tempVal = getDtText(tempVal.dt_txt);
      
          response.map( result => {   
      
            if(getDtText(result.dt_txt) !== tempVal){
      
              fiveDaysArray.push(tempArr);
              tempArr = [];
              tempVal = getDtText(result.dt_txt);
              tempArr.push(result);
      
      
            }else{
              tempArr.push(result);
            }
      
          })
      
          return(fiveDaysArray);
    }];

}

@edit 我试图创建新的钩子。现在，它不会无限运行+它不会检索任何错误。我当前的问题是，每当我在输入中键入内容时，它就会运行，并且在第一次加载页面时，它就会运行两次，并且只在我调用它的位置：

  const fetchCall = async () =>{
    const request = await fetch(`http://api.openweathermap.org/data/2.5/forecast?q=${query}&appid=${APP_KEY}&units=metric`);
    const response = await request.json();
    setArray(response.list);
  }

这对我来说没有任何意义，例如，请求未像该钩子一样被触发多次。我还在这里传递对此组件的响应：

setArray(response.list);

当我在组件中console.log（'response'）时，它会检索空数组。

如何创建自定义反应挂钩？

0 个答案: