React .map 一个对象

Question

我有一个 eslint 错误 属性 'date' 在类型 'never' 上不存在，它在 data.date.知道我该如何解决吗？

import React from 'react'
import app from './../Flamelink'

function App() {
  const [data, setData] = React.useState([])
  React.useEffect(() => {
    const fetchData = async () => {
      const data = await app.content.get({
        schemaKey: 'persons'
      })
      setData(data)
    }
    fetchData()
  }, [])
  return (
    <ul>
      {data.map(data => (
        <li>{data.date}</li>
      ))}
    </ul>
  )
}

export default App

Answer 1

首先，我会使用不同的变量名，而不是只调用所有内容 data。这样你就可以避免 variable shadowing errors.

如果你希望你的状态变量是 data 然后调用你从你的 fetch 中得到的答案，也许是 result。然后，在映射您的 data 状态时，也将当前值称为其他值，可能是 item 或 dataItem.

其次，由于您似乎在使用 TypeScript，因此您需要告诉 TS 您的 data 状态数组的结构。

试试这个：

function App() {
  const [data, setData] = React.useState<Array<{date: string}>>([]);
  React.useEffect(() => {
    const fetchData = async () => {
      const result = await app.content.get({
        schemaKey: "persons"
      });
      setData(result);
    };
    fetchData();
  }, []);

  return (
    <ul>
      {data.map(item=> (
        <li>
          {item.date}
        </li>
      ))}
    </ul>
  );
}

React .map 一个对象

React .map an object

reactjs

typescript

tslint