reactjs 如何从json-server中检索数据

h6my8fg2  于 2023-03-08  发布在  React
关注(0)|答案(2)|浏览(131)

我想在按下Data组件中的按钮时打印console.log()中的db.json中的userData,但无法打印。我的****组件中出现错误<App.tsx>。

//Error
//App.tsx

ERROR in src/App.tsx:31:8
TS2786: 'Data' cannot be used as a JSX component.
  Its return type 'void' is not a valid JSX element.
    29 |   return (
    30 |     <div className="App">
  > 31 |       <Data />
       |        ^^^^
    32 |     </div>
    33 |   );
    34 | }

我不知道我做错了什么,我请求你指出我这样对我所犯的错误。
一个一个一个一个一个x一个一个二个一个x一个一个三个一个x一个一个x一个四个一个

kuhbmx9i

kuhbmx9i1#

我想你的括号有问题,试试看:

export default function Data() {
    function displayuser() {
        getUser()
    }
    
    return (
        <div>
            <button onClick={displayuser}>get</button>
        </div>
    )
}
qni6mghb

qni6mghb2#

您的错误是“data cannot be used as a jsx element”。您正在尝试使用jsx中的组件(在返回之后)。因此,请不要执行以下操作:

return (
  <div className="app">
    <data />
  </div>
)

你应该把它放在花括号里,如下所示:

return (
  <div className="app">
    {<data />}
  </div>
)

当你使用一些函数,变量或者其他非普通jsx的东西时,你需要把它放在花括号里。

相关问题