[使用React钩子时按索引选择数组中的项

Question

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

我正在尝试根据API中的数据在SPA上创建组件。使用React钩子useState和useEffect我创建了状态，进行了axios调用，然后将response.data.articles设置为state（.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>
  );
}

从这里开始，我的状态是一个对象数组。我的目标是将FIRST对象作为prop传递给组件<HeaderStory />，但是每当我尝试用点表示法引用此数组项时，都会遇到未定义的错误。我试图解决这个问题的尝试是将项目设置为变量，然后将变量作为道具传递给组件。

const firstStory = storyArray[0];

这也会导致未定义的错误。在引用要在React中传递和使用的数组中的项目方面寻求建议/帮助。

Answer 1

您应该为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属性。

Answer 2

在第一个渲染上，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>
    );

}