React .fetch REST调用在渲染中返回空列表,但是知道对象的字段吗?

时间:2019-04-02 14:43:06

标签: javascript reactjs rest fetch-api

代码正在触及我的端点,并且我收到了表明它知道列表中元素的错误。但是,列表返回的大小为零。我想知道我是否错误地传递了数组的状态,因此为什么在尝试渲染它时它是空的?我对ReactJS有点陌生,所以请原谅这个愚蠢的问题。

下面是代码

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

class MyComponent extends React.Component {
  constructor(props) {
  super(props);
  this.state = {
     error: null,
     isLoaded: false,
     items: []
    };
}

componentDidMount() {
     fetch("http://localhost:8080/retrieve/123")
       .then(res => res.json())
       .then(
      (res) => {

        this.setState({

          isLoaded: true,
          items: Array.from(res)
          });
       },
        (error) => {
           this.setState({
           isLoaded: true,
           error
         });
      }
    )
  }

 render() {
    const { error, isLoaded, items} = this.state;
    if (error) {
    return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
    return <div>Loading...</div>;
    } else {
    return (
    // <ul> 
    //   {items.map(item => (
    //     <li key={item.name}>
    //       {item.name} {item.price}
    //     </li>
    //   ))}
    // </ul> 
       <div>
        test{this.items},
        {items.length}
       </div>

     );
    }
  }
}

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

渲染器中的items.length返回0,并且'test'打印也是如此。启用了CORS。

谢谢

0 个答案:

没有答案