通过索引选择数组中的项目，同时使用 React 钩子

Posted 2023-02-22

【中文标题】通过索引选择数组中的项目，同时使用 React 钩子

【英文标题】：Selecting item in array by index, while using React hooks

【发布时间】：2020-06-27 04:14:31

【问题描述】：

TL/DR：按索引引用数组中的项目时遇到问题（使用 React），可以使用一些指导。

我正在尝试使用来自 API 的数据在我的 SPA 上创建一个组件。使用 React 钩子 useState 和 useEffect 我创建了状态，完成了 axios 调用，然后将 response.data.articles 设置为状态（.articles 是我用来创建动态内容的对象数组）。

 function App() 

  const [storyArray, setStoryArray] = useState();

  useEffect(() => 
    axios.get('http://newsapi.org/v2/everything?domains=wsj.com&apiKey=[redacted_key_value]')
      .then((response) =>  
        // console.log(response);
        setStoryArray(response.data.articles);
      )
      .catch((err) => 
        console.log(err);
      )
  , [])

  console.log(storyArray)

  return (
    <div className="App">
      <Directory />
      <HeaderStory />
    </div>
  );

从这里开始，我的状态是一个对象数组。我的目标是将第一个对象作为道具传递给组件<HeaderStory />，但是任何时候我尝试用点符号引用这个数组项时都会遇到未定义的错误。我试图规避这个问题的尝试是将项目设置为一个变量，然后将该变量作为道具传递给组件。

const firstStory = storyArray[0];

这也导致了未定义的错误。寻找关于引用数组中要在 React 中传递和使用的项目的建议/帮助。

【参考方案1】：

在第一次渲染时，storyArray 将没有值/未定义，useEffect 挂钩将仅在 component mount 之后执行。

所以你必须有条件地渲染组件，如果storyArray 有值那么只渲染HeaderStory。

示例：

function App() 
    const [storyArray, setStoryArray] = useState();
    useEffect(() => 
        axios.get('http://newsapi.org/v2/everything?domains=wsj.com&apiKey=[redacted_key_value]')
            .then((response) => 
                // console.log(response);
                setStoryArray(response.data.articles);
            )
            .catch((err) => 
                console.log(err);
            )
    , [])

    return (
        <div className="App" >
            <Directory />
            storyArray && <HeaderStory firstStory=storyArray[0] />
        </div>
    );

【参考方案2】：

你应该初始化storyArray的默认值。

示例代码：

function App() 

  const [storyArray, setStoryArray] = useState([]); //Init storyArray value

  useEffect(() => 
    axios.get('http://newsapi.org/v2/everything?domains=wsj.com&apiKey=[redacted_key_value]')
      .then((response) =>  
        // console.log(response);
        setStoryArray(response.data.articles);
      )
      .catch((err) => 
        console.log(err);
      )
  , [])

  console.log(storyArray)

  return (
    <div className="App">
      <Directory />
      <HeaderStory firstStory=storyArray[0] ||  />
    </div>
  );

我设置道具 firstStory=storyArray[0] || ，因为如果 storyArray[0] 未定义，则为 firstStory 属性传递空对象“”。