堆栈内存溢出
  简体   繁体   English

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

[英]Fetch data into React component and render it

 原文  2019-08-09 21:24:28  7   3    javascript/ reactjs/ promise/ render

问题描述

Backend dev here trying to make a super scrappy app. 后端开发人员在这里尝试制作一个超级草率的应用程序。 Don't judge me. 不要评价我 :P ：P

Started from create-react-app. 从create-react-app开始。 My App.js looks like this: 我的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'));

The response I get from localhost:8080/api/requiredUsers (where I am running a springboot app): 我从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"}]

When I comment out , I get a console.log print of: 当我注释掉时，会得到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)

But when I don't comment it out, I get this error: 但是当我不注释掉它时，会出现以下错误： 

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

Please tell me how I can render this. 请告诉我我该如何渲染。

3 个解决方案

解决方案1
 2  2019-08-09 21:28:26

response.json() returns a promise, not the data. response.json()返回一个promise，而不是数据。

You need to extract the data first. 您需要先提取数据。 

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

解决方案2
 2 已采纳  2019-08-09 21:31:32

You are missing another then (response.json() returns a promise) 然后，您缺少另一个（response.json（）返回一个promise） 

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

check if foo is something 检查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>

解决方案3
 1  2019-08-09 21:36:28

Define the state in the constructor as given below. 如下所示在构造函数中定义状态。 

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

This is occurring because in react life cycle, render() loads before componentdidmount() and foo is not defined before componentdidmount() runs. 发生这种情况是因为在响应生命周期中，render（）在componentdidmount（）之前加载，而foo在componentdidmount（）运行之前未定义。 So there is no state named foo. 因此，没有名为foo的状态。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何通过api获取数据并使用它渲染子组件 - 对谷歌地图做出反应 - How fetch data by api and render child component with it - react google maps 如何在 React js 中渲染功能组件之前获取数据 - How to fetch data before render functionnal component in react js 从一个组件中获取数据并在另一个组件中进行渲染 - fetch data from a component and render it in another component 获取数据然后渲染到dom React - Fetch data and then render it to dom React React 获取对象的数据并渲染 - React fetch data of objects and render 在React JS组件中获取Django渲染参数 - Fetch django render argument in react js component 在获取React Native之后渲染组件 - Render component after fetch React Native React：如何将数据渲染到组件中？ - React: how to render data into a component? 在React组件中获取数据的位置 - Where to fetch data in React component React 获取 api 数据到组件 - React fetch api data to component
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM