Question

我是React的新手，我遇到以下代码的问题：

import React, { Component } from 'react';
import banner from './images/banner.png';
import logo from './images/logo.png';
import coin from './images/coin.png';
import './App.css';
var $ = require('jquery');


function CardItem(props) {
  return (
                    <li>
                        <div className="imageWrapper">
                            <img/>
                        </div>
                        <h3>Title</h3>
                        <p>Category</p>

                    </li>
  );
}


class Cards extends Component {

  constructor() {
    super();

    let items = [];
    this.items = items;

     $.ajax({
      url: '//localhost:3004/products',
      dataType: 'json',
      success: function(data) {

       items.push(data);

      },
      error: function(xhr, status, err) {
         console.log("\nError:" + err);

      }
    });
  }

    render(){


        var itemsList = this.items.map(function(oneItem){

            return <CardItem/>;
        });



        return (

                <section>
                    <h2>{this.items.length} Products</h2>

                    <ul>
                {itemsList}     

                    </ul>
                </section>
        );
    }
}


class App extends Component {
  render() {
    return (


        <div className="App">
            <header>
                <img className="logo" src={logo}/>
                <img className="banner" src={banner}/>


            </header>

            <Cards/>

        </div>


    );
  }
}

export default App;

假设网络浏览器应该显示数组items的列表，但它没有显示任何内容，就像数组是空的一样。

当回调更改变量items时，我在浏览器中看到的内容不会更新。我做错了什么？

Answer 1

我看到两个问题：

items.push(data)实际上会将产品数组作为项添加到items数组中。请改用this.items = this.items.concat(data)。
您需要在收到数据时重新渲染组件。因此，我最好将您的项目保持在组件状态：成功回调中调用this.setState({ items: data })（将触发重新呈现）并使用this.state.items方法中的render()代替this.items }

正如Rohitas所说，请在componentDidMount

因此，您的Cards组件可能类似于：

import fetch from 'cross-fetch';

// ...

class Cards extends Component {

  constructor() {
    super();
    this.state = {
      items: [],
    };
  }

  componentDidMount() {
    fetch('//localhost:3004/products')
      .then(res => {
        if (res.status >= 400) {
          console.error('Unable to fetch products', res);
        } else {
          res.json()
            .then(items => this.setState({ items });
        }
      });
  }

  render() {
    return (
      <section>
        <h2>{this.state.items.length} Products</h2>
        <ul>
          {this.state.items.map(item =>
            <CardItem {...item} />)}
        </ul>
      </section>
    );
}

React变量发生了变化，但是没有渲染...为什么？

1 个答案: