Question

我的React应用程序中的render函数不断被调用，这会导致问题。我有一个显示某些状态对象的函数，但由于不断被调用而失败。至少那是我认为正在发生的事情。

其他错误包括未承诺的承诺和未安装组件上的状态更新。我认为这些只是不断重新渲染的症状，但我不确定。我粘贴了以下所有相关代码，以希望有人能弄清楚并帮助我。

代码

import React, { Component } from 'react';
import './style.css';
import { FlexyFlipCard } from 'flexy-flipcards';
import Bingo from '../utils/Bingo';

class Card extends Component {
  constructor(props) {
    super();

    console.log('constructor - This happens 1st.');

    this.state = {
      loading: 'initial',
      data: '',
      card: {},
      tiles: {}
    };

  }

  componentWillMount() {

    console.log('componentWillMount - This happens 2nd.');

    this.setState({ profile: {} });
    const { userProfile, getProfile } = this.props.auth;
    if (!userProfile) {
      getProfile((err, profile) => {
        this.setState({
          profile,
          loading: 'profile'
        });
      });
    } else {
      this.setState({ profile: userProfile });
    }
  }

  componentDidMount() {

    console.log('componentDidMount - This happens 5th.');

    const cardId = 14;

    this.setState({ loading: 'true' });
    this.fetchCard(cardId)
    .then((card) => {
      console.log('componentDidMount - This happens 9th.');
      this.setState({ tiles: card }, function() {
        this.setState({ loading: 'complete' })
      });
    });
  }

  fetchCard(cardId) {

    const promise = new Promise((resolve, reject) => {
      Bingo.getTiles(cardId).then(card => {
        console.log('fetchCard - This happens 8th (after Bingo.getTiles).');
        resolve(card);
      });
    });

    console.log('fetchCard - This happens 6th.');
    return promise;
  }

  renderCards() {

    console.log('renderCards');

    if (this.state.tiles.length > 0) {
      return this.state.tiles.map(tile => {
        return (
          <div
            className="item"
            key={tile[0].id}>
              <FlexyFlipCard
                  frontBackgroundColor="#000034"
                  backBackgroundColor="#000034"
              >
                <div ref="flipper">
                  <h3>{tile[0].name}</h3>
                  <br />
                  <button className="select">Select artist</button>
                </div>

                <div>
                  <h4>
                    <input type="radio"
                      name="artist1"
                      value={tile[0].artist_1}
                    />
                    {tile[0].artist_1}
                    <br />
                    <br />
                    <input type="radio"
                      name="artist2"
                      value={tile[0].artist_2}
                    />
                    {tile[0].artist_2}
                    <br />
                    <br />
                    <input type="radio"
                      name="artist3"
                      value={tile[0].artist_3}
                    />
                    {tile[0].artist_3}
                    <br />
                    <br />
                    <div ref="flipper">
                      <button className="select"
                        onClick={this.submitArtist}>
                        Save artist
                      </button>
                    </div>
                  </h4>
                </div>
              </FlexyFlipCard>

          </div>
        );
      });
    }
  }

  render() {

    console.log('render - This happens 3rd - after componentWillMount');

    const { profile } = this.state;

    if (this.state.loading === 'initial') {
      console.log('render - This happens 4th - after the class is constructed.');
      return <h2>Intializing...</h2>;
    }


    if (this.state.loading === 'true') {
      console.log('render - This happens 7th - when waiting for data.');
      return (
        <div className="Card">
          <h2>Preparing your bingo card - please wait one moment</h2>
        </div>
      );
    }


    if (this.state.loading === 'complete') {
      console.log('render - This happens when???');
      return (
        <div className="Card">
          <h2>{profile.nickname + String.fromCharCode(39)}s Radio Bingo Board</h2>
          <div className="tileCard">
            <div className="item-list">
              {this.renderCards()}
            </div>
          </div>
         </div>
      );
    }

    console.log('render - This happens 8th - after I get data.');
    return (
      <div className="Card">
        Blank space
       </div>
    );
  }
}

export default Card;

Answer 1

每次使用setState都会呈现。并非总是如此，有时React会一次执行几个setState动作。

我无法读取所有错误，但是第一个是因为页面是在对象不存在的那一刻呈现的，因此它说无法读取未定义的属性ID。您可以先询问渲染id对象是否存在。例如。 if（title）title.id等。

如果需要向用户显示所有步骤，则必须假定在某些情况下对象将不存在，并且始终必须在调用属性之前检查对象是否存在。

Answer 2

问题是我的获取响应是对象而不是数组，所以我无法映射它。错误消息使我认为，尽管渲染被调用太多了，这是一个问题。

这段简单的代码通过将JSON输入数组来解决了这个问题。可惜我花了大约一个星期才弄清楚。

Bingo.getTiles(cardId).then(response => {

  const card = Object.keys(response).map((index) => {
    const tile = [];
    tile.push(response[index]);
    return tile;
  });

React render函数不断被调用

2 个答案: