Question

我想有一个本地设置器来更新我从定制获取钩子中提取的数据：

  function ContactList(props) {
  const contacts =useFetch(fetchUrl, []);**//contain data**
  const [data,setData] = useState(contacts);**//remains empty**

  return (
    <div>
      <Navbar />
      <ul className="collection">
        <ContactItem contacts={contacts} setContacts={setData} />
      </ul>
    </div>
  );
}

fetchHook看起来像这样：

export const useFetch = (url, initialValue) => {
    const [result, setResult] = useState(initialValue);
    useEffect(() => {
        const fetchData = async () => {
            const result = await axios(url);
            setResult(result.data.contact);
        };
        fetchData();

    }, []);

return result
}

所以我需要contactList有一个我目前无法实现的设置器，因为状态仍然是一个空数组。

Answer 1

const contacts =useFetch(fetchUrl, []);

useFetch是异步的，它会在componentMounts之后进行调用并给出结果，因为我假设您将其放入具有空依赖关系的useEffect中。因此，数据将在第一个渲染中不可用，从而使其初始化为空。

编辑： 为了更好地理解，请在以下示例中遵循console.log： https://codesandbox.io/embed/friendly-ives-xt5k0

您将看到它首先为空，然后获取值。

现在，您的代码也是如此。在第一个渲染上，它是空的，即您设置结果的状态。相反，您可以仅使用contacts的值。

编辑2： 看到需要的内容之后，您要做的就是还从钩子中返回setResult：

export const useFetch = (url, initialValue) => {
    const [result, setResult] = useState(initialValue);
    useEffect(() => {
        const fetchData = async () => {
            const result = await axios(url);
            setResult(result.data.contact);
        };
        fetchData();

    }, []);

return {result, setResult}
}

function ContactList(props) {
  const {result, setResult} =useFetch(fetchUrl, []);

  return (
    <div>
      <Navbar />
      <ul className="collection">
        <ContactItem contacts={result} setContacts={setResult} />
      </ul>
    </div>
  );
}

来自自定义获取挂钩和本地状态的数据

1 个答案: