Javascript 反应-未捕获类型错误：无法读取属性；名称'；使用Airtable定义未定义的

我正在

React

中构建一个小的调查组件，用户可以在其中决定是否在不同的选择中进行投票。投票记录在一个名为“调查”的表格中

我遇到的问题是，我在终端中收到一个名为：TypeError:无法读取未定义的属性“name”的错误`

它似乎与具有0个值的未定义值相关。但是，我是“map（）”该特定数组的成员，不了解它未定义的内容：

survey.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>
  )
}

最后，导致问题的部分如下所示：

到目前为止，我一直在学习和学习。特别是最后一个似乎很有用，但我仍然不精通

Angular

，也不完全理解

Typescript

，尽管我正在研究它

然后我也研究了post，但仍然找不到我未定义变量的答案

---

感谢您为我们提供了一个潜在的解决方案。

在ES6解构中，我们可以简化代码

如你所见

const {
         id, 
         fileds: { name, votes },
      } =item

相当于

item.id // some id
item.fileds.name // some name i
item.fields.votes // some votes

在您的情况下，您会破坏对象项，但文件始终是经典形式

你的代码应该是

<h4>{fileds.name}</h4>
<p>{fileds.votes} votes</p>

{fileds.name}
{fileds.voces}投票

我简直不敢相信我在这个bug上浪费了一个小时！谢谢你的帮助：）和阅读问题！如果你认为我的问题是清楚的，请考虑给我竖起大拇指：

item.id // some id
item.fileds.name // some name i
item.fields.votes // some votes

<h4>{fileds.name}</h4>
<p>{fileds.votes} votes</p>