javascript - 将数据获取到 React 组件并渲染它

标签 javascript reactjs promise render

后端开发人员试图制作一个 super 斗志旺盛的应用程序。别评判我。 :P

从create-react-app开始。我的 App.js 如下所示:

import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';

class Table extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        fetch('/api/requiredUsers')
            .then(response =>
                {
                    this.setState({foo: response.json()});
                    console.log(this.state.foo);
                }
            );
    }

    render() {
        return (
            <div>
                <table className="table">
                    <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">Name</th>
                        <th scope="col">Age</th>
                        <th scope="col">Number</th>
                    </tr>
                    </thead>
                    <tbody>
                    {this.state.foo.map(person => (
                        <tr key={person.id}>
                            <th scope="row">{person.id}</th>
                            <td>{person.name}</td>
                            <td>{person.age}</td>
                            <td>{person.number}</td>
                        </tr>
                    ))}
                    </tbody>
                </table>
            </div>
        )
    }
}

export default Table;

ReactDOM.render(<Table />, document.getElementById('root'));

我从 localhost:8080/api/requiredUsers (我运行 springboot 应用程序的地方)得到的响应:

[{"id":8,"name":"christoph","age":32,"number":"555-555-5555"},
{"id":9,"name":"debra","age":31,"number":"555-555-5555"},
{"id":10,"name":"eric","age":29,"number":"555-555-5555"},
{"id":19,"name":"richard","age":20,"number":"555-555-5555"},
{"id":14,"name":"santiago","age":25,"number":"(555)555-5555"}]

当我注释掉时，我得到一个console.log打印:

Promise {<pending>}
__proto__: Promise
[[PromiseStatus]]: "resolved"
[[PromiseValue]]: Array(5)
0: {id: 8, name: "christoph", age: 32, number: "555-555-5555"}
1: {id: 9, name: "debra", age: 31, number: "555-555-5555"}
2: {id: 10, name: "eric", age: 29, number: "555-555-5555"}
3: {id: 19, name: "richard", age: 20, number: "555-555-5555"}
4: {id: 14, name: "santiago", age: 25, number: "(555)555-5555"}
length: 5
__proto__: Array(0)

但是当我不注释掉它时，我收到此错误:

Uncaught TypeError: Cannot read property 'foo' of null
    at Table.render (App.js:34)
    at finishClassComponent (react-dom.development.js:8377)
    at updateClassComponent (react-dom.development.js:8345)
    at beginWork (react-dom.development.js:8966)
    at performUnitOfWork (react-dom.development.js:11798)
    at workLoop (react-dom.development.js:11827)
    at HTMLUnknownElement.callCallback (react-dom.development.js:104)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:142)
    at invokeGuardedCallback (react-dom.development.js:191)
    at replayUnitOfWork (react-dom.development.js:11302)
    at renderRoot (react-dom.development.js:11869)
    at performWorkOnRoot (react-dom.development.js:12422)
    at performWork (react-dom.development.js:12343)
    at performSyncWork (react-dom.development.js:12320)
    at requestWork (react-dom.development.js:12220)
    at scheduleWorkImpl (react-dom.development.js:12095)
    at scheduleWork (react-dom.development.js:12055)
    at scheduleRootUpdate (react-dom.development.js:12683)
    at updateContainerAtExpirationTime (react-dom.development.js:12711)
    at Object.updateContainer (react-dom.development.js:12730)
    at ReactRoot../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (react-dom.development.js:16030)
    at react-dom.development.js:16449
    at Object.unbatchedUpdates (react-dom.development.js:12530)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:16445)
    at Object.render (react-dom.development.js:16513)
    at Object../src/App.js (App.js:51)
    at __webpack_require__ (bootstrap e37a71bbed3a8bfb78c4:678)
    at fn (bootstrap e37a71bbed3a8bfb78c4:88)
    at Object../src/index.js (index.css?f255:26)
    at __webpack_require__ (bootstrap e37a71bbed3a8bfb78c4:678)
    at fn (bootstrap e37a71bbed3a8bfb78c4:88)
    at Object.0 (registerServiceWorker.js:117)
    at __webpack_require__ (bootstrap e37a71bbed3a8bfb78c4:678)
    at bootstrap e37a71bbed3a8bfb78c4:724
    at bootstrap e37a71bbed3a8bfb78c4:724
render @ App.js:34
finishClassComponent @ react-dom.development.js:8377
updateClassComponent @ react-dom.development.js:8345
beginWork @ react-dom.development.js:8966
performUnitOfWork @ react-dom.development.js:11798
workLoop @ react-dom.development.js:11827
callCallback @ react-dom.development.js:104
invokeGuardedCallbackDev @ react-dom.development.js:142
invokeGuardedCallback @ react-dom.development.js:191
replayUnitOfWork @ react-dom.development.js:11302
renderRoot @ react-dom.development.js:11869
performWorkOnRoot @ react-dom.development.js:12422
performWork @ react-dom.development.js:12343
performSyncWork @ react-dom.development.js:12320
requestWork @ react-dom.development.js:12220
scheduleWorkImpl @ react-dom.development.js:12095
scheduleWork @ react-dom.development.js:12055
scheduleRootUpdate @ react-dom.development.js:12683
updateContainerAtExpirationTime @ react-dom.development.js:12711
updateContainer @ react-dom.development.js:12730
./node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:16030
(anonymous) @ react-dom.development.js:16449
unbatchedUpdates @ react-dom.development.js:12530
legacyRenderSubtreeIntoContainer @ react-dom.development.js:16445
render @ react-dom.development.js:16513
./src/App.js @ App.js:51
__webpack_require__ @ bootstrap e37a71bbed3a8bfb78c4:678
fn @ bootstrap e37a71bbed3a8bfb78c4:88
./src/index.js @ index.css?f255:26
__webpack_require__ @ bootstrap e37a71bbed3a8bfb78c4:678
fn @ bootstrap e37a71bbed3a8bfb78c4:88
0 @ registerServiceWorker.js:117
__webpack_require__ @ bootstrap e37a71bbed3a8bfb78c4:678
(anonymous) @ bootstrap e37a71bbed3a8bfb78c4:724
(anonymous) @ bootstrap e37a71bbed3a8bfb78c4:724
Show 5 more frames
index.js:2178 The above error occurred in the <Table> component:
    in Table (at App.js:51)

Consider adding an error boundary to your tree to customize error handling behavior.
__stack_frame_overlay_proxy_console__ @ index.js:2178
logCapturedError @ react-dom.development.js:9627
logError @ react-dom.development.js:9666
commitErrorLogging @ react-dom.development.js:9879
commitAllLifeCycles @ react-dom.development.js:11443
callCallback @ react-dom.development.js:104
invokeGuardedCallbackDev @ react-dom.development.js:142
invokeGuardedCallback @ react-dom.development.js:191
commitRoot @ react-dom.development.js:11578
completeRoot @ react-dom.development.js:12475
performWorkOnRoot @ react-dom.development.js:12425
performWork @ react-dom.development.js:12343
performSyncWork @ react-dom.development.js:12320
requestWork @ react-dom.development.js:12220
scheduleWorkImpl @ react-dom.development.js:12095
scheduleWork @ react-dom.development.js:12055
scheduleRootUpdate @ react-dom.development.js:12683
updateContainerAtExpirationTime @ react-dom.development.js:12711
updateContainer @ react-dom.development.js:12730
./node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:16030
(anonymous) @ react-dom.development.js:16449
unbatchedUpdates @ react-dom.development.js:12530
legacyRenderSubtreeIntoContainer @ react-dom.development.js:16445
render @ react-dom.development.js:16513
./src/App.js @ App.js:51
__webpack_require__ @ bootstrap e37a71bbed3a8bfb78c4:678
fn @ bootstrap e37a71bbed3a8bfb78c4:88
./src/index.js @ index.css?f255:26
__webpack_require__ @ bootstrap e37a71bbed3a8bfb78c4:678
fn @ bootstrap e37a71bbed3a8bfb78c4:88
0 @ registerServiceWorker.js:117
__webpack_require__ @ bootstrap e37a71bbed3a8bfb78c4:678
(anonymous) @ bootstrap e37a71bbed3a8bfb78c4:724
(anonymous) @ bootstrap e37a71bbed3a8bfb78c4:724
Show 4 more frames
App.js:34 Uncaught TypeError: Cannot read property 'foo' of null
    at Table.render (App.js:34)
    at finishClassComponent (react-dom.development.js:8377)
    at updateClassComponent (react-dom.development.js:8345)
    at beginWork (react-dom.development.js:8966)
    at performUnitOfWork (react-dom.development.js:11798)
    at workLoop (react-dom.development.js:11827)
    at renderRoot (react-dom.development.js:11858)
    at performWorkOnRoot (react-dom.development.js:12422)
    at performWork (react-dom.development.js:12343)
    at performSyncWork (react-dom.development.js:12320)
    at requestWork (react-dom.development.js:12220)
    at scheduleWorkImpl (react-dom.development.js:12095)
    at scheduleWork (react-dom.development.js:12055)
    at scheduleRootUpdate (react-dom.development.js:12683)
    at updateContainerAtExpirationTime (react-dom.development.js:12711)
    at Object.updateContainer (react-dom.development.js:12730)
    at ReactRoot../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (react-dom.development.js:16030)
    at react-dom.development.js:16449
    at Object.unbatchedUpdates (react-dom.development.js:12530)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:16445)
    at Object.render (react-dom.development.js:16513)
    at Object../src/App.js (App.js:51)
    at __webpack_require__ (bootstrap e37a71bbed3a8bfb78c4:678)
    at fn (bootstrap e37a71bbed3a8bfb78c4:88)
    at Object../src/index.js (index.css?f255:26)
    at __webpack_require__ (bootstrap e37a71bbed3a8bfb78c4:678)
    at fn (bootstrap e37a71bbed3a8bfb78c4:88)
    at Object.0 (registerServiceWorker.js:117)
    at __webpack_require__ (bootstrap e37a71bbed3a8bfb78c4:678)
    at bootstrap e37a71bbed3a8bfb78c4:724
    at bootstrap e37a71bbed3a8bfb78c4:724

请告诉我如何渲染它。

最佳答案

你错过了另一个(response.json() 返回一个 promise )

fetch('/api/requiredUsers')
    .then(response => response.json())
    .then(data => this.setState({ foo: data }));

检查 foo 是否是某物

             <tbody>
                {this.state.foo && this.state.foo.map(person => (
                    <tr key={person.id}>
                        <th scope="row">{person.id}</th>
                        <td>{person.name}</td>
                        <td>{person.age}</td>
                        <td>{person.number}</td>
                    </tr>
                ))}
                </tbody>

关于javascript - 将数据获取到 React 组件并渲染它，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57437273/

上一篇：javascript - 将数字字符串转换为数组中的数字

下一篇：javascript - 检查数组元素是否具有特定格式

相关文章：

javascript - 使用值作为 setTimeout

javascript - 使用 AJAX 和 Javascript 更新 Div 容器

reactjs - 当作为 prop 传递给功能组件时， react 函数未定义

javascript - Reactjs-Redux : Even after user is logged in, mapStateToProps 返回用户首先被认证为false，然后为true

javascript - 我如何使用 Karma 对 promise 链进行单元测试？

caching - AngularJS:路由解析 promise 已缓存

javascript - 无法加载资源: the server responded with a status of 403 (Forbidden) and 500 (Internal Server Error)

JavaScript 和第三方 cookie

javascript - 使用 Webpack 2 延迟加载样式表

javascript - angular.forEach 解决嵌套的 promise

©2024 IT工具网  联系我们