按索引选择数组中的项，同时使用React
按索引选择数组中的项，同时使用React
提问于 2020-03-16 01:38:21
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的项的建议/帮助。
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-03-16 02: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>
);
}Stack Overflow用户
发布于 2020-03-16 02: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>
);
}我将道具设置为firstStory={storyArray \x\\{}，因为如果storyArray未定义，则为firstStory支柱传递空对象"{}“。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60699385
复制相关文章
相似问题
腾讯云开发者
