反应 .map 一个对象答案

【问题标题】：React .map an object反应 .map 一个对象
【发布时间】：2020-04-01 20:55:00
【问题描述】：

我遇到了一个 eslint 错误属性“日期”在类型“从不”上不存在，它位于 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

【问题讨论】：

您使用的是 javascript 还是 typescript？ eslint 还是 tslint？哪个 IDE？
不要把所有的东西都称为数据。每次使用不同的变量名。

标签： reactjs typescript tslint

【解决方案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>
  );
}

【讨论】：

@HimaduSirimanna，你是什么意思？这将如何保护隐私？
我得到 TypeError: data.map is not a function 。我习惯于通过导入 JSON 数据在 UI 中显示数据并显示为 div>data.map
{n.data.head}

{n.cat.content}.etc。但是你的解决方案不能用那种方式....我也在使用带有 ts lint 的打字稿我是新用户和学习者，所以请原谅我，我将所有内容都更改为数据，因为为了保护数据隐私。
, TypeError: data.map is not a function,
@HimaduSirimanna 也许result 不是一个数组？价值是多少？
好的...完成了。

{n.data.head}