Question

我目前正在尝试学习React，并且正在尝试解决挑战练习。我在端口（节点）上存储了一个简单的JSON数组，使用提取API将其调用到我的react服务器中。该请求似乎已经完成，但是我无法在我的反应页面上显示JSON对象的任何元素。

我已经尝试研究此问题，但似乎并非我要找的东西。

这是App主页面，它向包含JSON元素的端口5555（/ list）上托管的Node服务器发出get请求。

class App extends Component {
        constructor(props){
            super(props);
            this.state = {
              cartList: []
            };
         }
        componentDidMount(){
  fetch("http://localhost:5555/list").then(data => 
       data.json()).then(data => this.setState({cartList: 
       data})).catch(err => console.log(err));
      }
         render() {
            return (
              <div className="Cart-App">
                  <header className="App-header">
                      <h1 className="App-title">Welcome to Shopping- 
                      R-US!</h1>
                      <Cart cartList = {this.state.cartList}/>
                  </header>
              </div>
          );
      }
    }

    export default App;

这是我尝试显示元素的类，在这里我使用map函数遍历数组，并显示想要的JSON对象中的特定属性。

class Cart extends Component {
     render() {
         const products = this.props.cartList.map(product => (
             <div className = "col-md-4">
                 <p>
                    {product.name}
                    {product.description}
                    {product.cost}
                 </p>
             </div>    
         ))             
         return (
              <div className = "products">     
                 <header className="Cart-Header">
                   <h1 className="App-title">Select which items you want from the catalog below!</h1>
                  </header>
                  <p className="Cart-Products">
                       {products}  
                   </p>
               </div>
            );
        }
    }

export default Cart;

这里的目标是仅将数组的元素（或至少特定的属性）显示在标题下的页面上。

Answer 1

如果您使用fetch从API中获取json数据，则需要通过调用data.json()（返回承诺）将响应数据对象转换为json。

看看它在您的App组件中的正确用法：

  componentDidMount() {
    fetch("http://localhost:5555/list")
      .then(data => data.json())
      .then(data =>
        this.setState({
          cartList: data
        })
      )
      .catch(err => console.log("Error:", err));
  }

请注意，.then()和.catch()都以函数作为参数！

您可以在这里使用它：https://codesandbox.io/s/react-fetch-data-qeuwf?fontsize=14

显示获取请求中的元素

1 个答案: