将数据提取到React组件并呈现

时间：2019-08-09 21:24:28

标签： javascript reactjs promise render

这里的后端开发人员试图制作一个超级草率的应用程序。不要评价我：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

请告诉我如何渲染此图像。

3 个答案:

答案 0 :(得分：2)

LandscapeCompanies返回一个承诺，而不是数据。

您需要先提取数据。

response.json()

答案 1 :(得分：2)

然后您就错过了另一个（response.json（）返回一个诺言）

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>

答案 2 :(得分：1)

在构造函数中定义状态，如下所示。 

constructor(props) {
    super(props);
    this.state = {
       foo:[]
    }
}

发生这种情况是因为在响应生命周期中，render（）在componentdidmount（）之前加载，而foo在componentdidmount（）运行之前未定义。因此，没有名为foo的状态。

相关问题
最新问题