如何让 React Hooks 返回一个数组

Question

我的 React 应用程序中有一些硬编码数据，现在我想从 API 中获取这些数据。我想保留类似数组的格式，因为这就是未来使用数据的方式。

我原来的组件：

import moment from 'moment';

const INITIAL_STATE = {
  articles:
    [
      {
        title: 'Guerrilla Public Service Redux (2017)',
        tag0: 'story',
        points: 421,
        created_at: moment('2020-05-27T16:05:32.000Z'),
        author: 'DerWOK',
      },
      {
        title: 'Build Yourself a Redux',
        tag0: 'story',
        points: 395,
        created_at: moment('2020-05-27T16:05:32.000Z'),
        author: 'jdeal',
      },
    ],
};

function Articles (state = INITIAL_STATE) {
      return state;
}

export default Articles;

这就是我想象的工作方式，但下面的 return() 中应该是什么对我来说是个谜：

import moment from 'moment';

function Articles() {
  const [error, setError] = useState(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [items, setItems] = useState([]);

  useEffect(() => {
    fetch("https://hn.algolia.com/api/v1/search?query=redux")
      .then(res => res.json())
      .then(
        (result) => {
          setIsLoaded(true);
          setItems(result.items);
        },
        (error) => {
          setIsLoaded(true);
          setError(error);
        }
      )
  }, [])

  if (error) {
    return <div>Error: {error.message}</div>;
  } else if (!isLoaded) {
    return <div>Loading...</div>;
  } else {
    return (

        {items.map(item => (
         ???)
    );
  }
}

export default Articles;

编辑：我确实有列表组件来呈现数据。我只需要以可接受的形式返回数据。

Answer 1

这对我来说看起来不错，除了在最后一个用例和其他用例中没有从组件返回 JSX 之外。试试这个

 return (
         <ul>
        {items.map((item, index) => <li key={index}>{item.title} </li> )}
         </ul>
    );

请注意，如果您的项目具有唯一 id，最好使用它们作为键而不是索引。

编辑： 这是一个示例，说明如何在文章中使用挂钩

function useGetArticles() {
  const [error, setError] = useState(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [items, setItems] = useState([]);

  useEffect(() => {
    fetch('https://hn.algolia.com/api/v1/search?query=redux')
      .then((res) => res.json())
      .then(
        (result) => {
          setIsLoaded(true);
          setItems(result.items);
        },
        (error) => {
          setIsLoaded(true);
          setError(error);
        }
      );
  }, []);

  return [items, isLoaded, error];
}

function Articles() {
  const [items, isLoaded, error] = useGetArticles();

  if (error) {
    return <div>Error: {error.message}</div>;
  } else if (!isLoaded) {
    return <div>Loading...</div>;
  } else {
    return (
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item.title} </li>
        ))}
      </ul>
    );
  }
}

Answer 2

如果您要做的只是将 Articles 作为一个函数来维护，那么您必须将其作为一个 Promise（这是多余的，因为 fetch 正在做您需要做的事情）。

您可以按照自己的方式编写自定义钩子，但是 Articles（必须命名为 useArticles，因为 react 需要它）不能成为您想要的功能，并且您将无缘无故地复杂化。

我的建议是像这样简单地将 useEffect 和其他状态挂钩移动到您的父组件（注意 App 是您的父组件而不是 Articles）：

import React, {useState, useEffect} from 'react';

const App = () => {
  const [error, setError] = useState(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [items, setItems] = useState([]);

  useEffect(() => {
    Articles()
        .then(res => {
        setIsLoaded(true);
        setItems(res.hits);
        setError(false);
      })
      .catch(error => {
        setIsLoaded(true);
        setError(true);
      })
    // you are repeating then/catch again even though you were doing it already on fetch. Only good reason to do this is if you are reusing the api calls in other places.
  }, [])

   return (
    <React.Fragment>
      Test
      <ul>
       {items.map((item, index) => <li key={index}>{item.title} </li> )}
     </ul>
    </React.Fragment>

    );

}

function Articles() {
  // too much code just to hide it inside a function
    return new Promise((resolve, reject) =>
    fetch("https://hn.algolia.com/api/v1/search?query=redux")
    .then(res => resolve(res.json()))
    .catch(error => reject(error))
  );
}

export default App;

这是重新格式化代码的钩子方法。但这本身并不意味着它更好：

import React, {useState, useEffect} from 'react';

const App = () => {
  // getting all useful state from the hook
  const {error, isLoaded, items, fetchItems} = useGetArticles();

  useEffect(() => {
    fetchItems(); // calling the method that ask for new data and loads item in the hook's state
  })

   return (
    <React.Fragment>
      <ul>
       {items.map((item, index) => <li key={index}>{item.title} </li> )}
     </ul>
    </React.Fragment>

    );

}
const useGetArticles = () => {
  const [error, setError] = useState(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [items, setItems] = useState([]);

  const fetchItems = () => {
    fetch("https://hn.algolia.com/api/v1/search?query=redux")
    .then(res => res.json())
    .then(res => {
      setIsLoaded(true);
      setItems(res.hits);
      setError(false);
    })
    .catch(error => {
      setIsLoaded(true);
      setError(true);
    })
  };

  // only return useful states and functions that main component can use
  return {error, isLoaded, items, fetchItems}
}

export default App;