小编gcr*_*gcr的帖子

我通过做在API调用axios中React使用UseEffect。
我们将响应设置为一个名为datausing的变量useState

const [data, setData] = useState({});
  setData(response);

响应来自 NASA API，我们只得到一个为此调用返回的对象（粘贴在下面）。

由于我将响应命名为“data”并且它也有一个“data”键，如果我想记录 url，我知道我会输入console.log(data.data.url)并且在我的app.js主函数中可以顺利运行。在我的card.js组件中，我可以成功登录console.log(data)，console.log(data.data)并且它完全符合您的预期，但是当我console.log(data.data.url)或(data.data.title)它由于某种原因变成时undefined，这会导致 JSX 的返回函数出现大错误，并且站点将无法加载：

 TypeError: Cannot read property 'data' of undefined error.

我不认为我的命名有任何问题，因为它在对象的更高级别工作正常，例如console.log(data.data)工作，并且我在眼前看到列出的下一级属性。

我真的是在 console.logging 这个：

{console.log('FROM INSIDE THE RETURN')}
{console.log(props.data)}  // works, displays object {}
{console.log(props.data.data)}  //works, displays object one level lower   
{console.log(props.data.data.url)}  // type error. You name the property.

不用说这行不通，这是我完成任务的第一种方法： …

我得到了波浪线：

你可以看到我输入的是正确的（我认为）。

  const hClick = (e:React.MouseEvent<HTMLButtonElement>)=>{
    console.log(e.target.value)
  }

这是有问题的元素。

      {props.question.responses.map((r: string, i: number) => {
        return <button key={i} value={r} className={`${CSS.columnBtn} ${CSS.gray}`} onClick={(e) => hClick(e)}>{r}</button>;
      })}

您可以清楚地看到它具有价值。我也做了我的研究。按钮不仅本身有值，而且 MS在他们的文档中说它们有一个 value prop，就像每个 Mozilla 的通用按钮元素一样，当我 ctrl + 单击进入 HTMLButtonElement 的 d.ts 文件时，它显示一个 value prop，它是一个字符串：

      {props.question.responses.map((r: string, i: number) => {
        return <button key={i} value={r} className={`${CSS.columnBtn} ${CSS.gray}`} onClick={(e) => hClick(e)}>{r}</button>;
      })}

此外，代码可以工作并记录该值。我对 TypeScript 还很陌生，所以可能有一些我不知道的东西，而这正是我想学习的。

顺便说一句，如果给定元素中不存在某个属性，但您给它一个自定义属性，它显然不会出现在 d.ts 中，那么您如何告诉编译器您的 html 属性 foo[="bar"] 存在关于活动？