问按索引选择数组中的项，同时使用React
EN

Stack Overflow用户

提问于 2020-03-15 17:38:21

回答 2查看 5.3K关注 0票数 1

TL/DR:在按索引引用数组中的项目时遇到问题(使用React)，可能需要一些指导。

我试图用来自API的数据在我的SPA上创建一个组件。使用React和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>
  );
}

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

const firstStory = storyArray[0];

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

javascript

arrays

reactjs

axios

components

数字工厂场景解决方案

帮助企业实现数字化、智能化，解决企业工厂内设备数据采集、设备指标分析、企业信息系统间数据孤岛打通、数据应用困难的问题

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-03-15 18:00:51

在第一次呈现时，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

Stack Overflow用户

发布于 2020-03-15 18:02:44

您应该输入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>
  );
}