[英]React - Uncaught TypeError: Cannot read property "name' of undefined using Airtable
I am building a small Survey component in React
where the user can decide to upvote or not among different choices.我正在React
中构建一个小型调查组件,用户可以在其中决定是否在不同的选择中投票。 Votes are registered in a table called "Survey" via Airtable投票通过Airtable登记在名为“调查”的表格中
The problem I have is that I receive in the terminal an error called: TypeError: Cannot read property 'name' of undefined`我遇到的问题是我在终端中收到一个名为的错误:TypeError: Cannot read property 'name' of undefined`
Which seems to be related to an undefined value that has 0 values.这似乎与具有 0 值的未定义值有关。 However I am 'map()' that specific array and don't understand what it is undefined:但是我是'map()'那个特定的数组并且不明白它是什么未定义:
survey.js调查.js
const Survey = () => {
const [items, setItems] = React.useState([]);
const [loading, setLoading] = useState(true);
const getRecords = async () => {
const records = await base('Survey').select({}).firstPage().catch(err => console.log(err));
// console.log(records);
const newRecords = records.map((record) => {
// lets destructure to get the id and fields
const {id, fields} = record;
return {id, fields};
})
setItems(newRecords);
setLoading(false);
}
useEffect(() => {
getRecords();
console.log(items)
},[])
return (
<Wrapper className="section">
<div className="container">
<Title title="Survey" />
<h3>most important room in the house?</h3>
{loading ? (
<h3>loading...</h3>
) : (
<ul>
{items.length > 0 && items[0].name.first}
{items.map(item => {
console.log(items);
const {
id,
fileds: { name, votes },
} =item;
return (
<li ley={id}>
<div className="key">
{name.toUpperCase().substring(0,2)}
</div>
<div>
<h4>{name}</h4>
<p>{votes} votes</p>
</div>
<button onClick={() => console.log("clicked")}>
<FaVoteYea />
</button>
</li>
)
})}
</ul>)}
</div>
</Wrapper>
)
}
I believe that part of the problem is due to the fact that the line blow, on pourposly set as initialization of arrays of object, is given no values (because I wanted to initialize it).我认为问题的一部分是由于线吹,在 purposly 设置为 object 的 arrays 的初始化时,没有给出任何值(因为我想初始化它)。
const [items, setItems] = React.useState([]);
In the end the part that is causing the problem is below:最后导致问题的部分如下:
{items.length > 0 && items[0].name.first}
{items.map(item => {
console.log(items);
const {
id,
fileds: { name, votes },
} =item;
So far I studied this post and this other post .到目前为止,我研究了这篇文章和这篇文章。 In particualr the last one seems to be useful but I am still not proficient in Angular
and not totally understand Typescript
yet, although I am working on it.特别是最后一个似乎很有用,但我仍然不精通Angular
并且还没有完全理解Typescript
,尽管我正在努力。
Then I also studied this post but could not still find an answer to my undefined variable.然后我也研究了这篇文章,但仍然找不到我未定义变量的答案。
Thanks for guiding to a potential solution.感谢您指导潜在的解决方案。
In ES6 destructuring lets us streamline our code在 ES6 中,解构让我们可以简化我们的代码
so as you see如你所见
const {
id,
fileds: { name, votes },
} =item
is equivalent to相当于
item.id // some id
item.fileds.name // some name i
item.fields.votes // some votes
in your case you distruct the object item but fileds is always in the classic form在您的情况下,您破坏了 object 项目,但文件始终采用经典形式
your code should be你的代码应该是
<h4>{fileds.name}</h4>
<p>{fileds.votes} votes</p>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.