Почему мой компонент реагирования не рендерится, когда в него входит реквизит? - PullRequest
Новая
       86

Почему мой компонент реагирования не рендерится, когда в него входит реквизит?

0 голосов
/ 03 сентября 2018

Я в настоящее время нахожусь в проекте, и мне приходилось делать нулевые проверки для каждого отдельного реквизита, который входит в состав дочерних компонентов, через лимит или через него. Я чувствую, что это не нормально с реагировать? Не является ли большой плюс React автоматический рендеринг? Если я попытаюсь что-то привести в состояние, я не смогу, потому что должна быть нулевая проверка в рендере, прежде чем я что-то сделаю с данными. Заранее спасибо !!

РОДИТЕЛЬСКИЙ КОМПОНЕНТ = 

class App extends Component {

     componentDidMount(){
        //where I load the data
        this.loadCardsFromServer();
        this.props.GetAllData();
      }


      render() {
      //NEED TO DO A NULL CHECK FROM THIS COMING FROM REDUX
         const filteredData = !!this.state.data ? this.state.data.filter(card =>{
         return  card.name.toUpperCase().includes(this.state.input.toUpperCase())
         }) : null;

      return (
      //MAKES ME DO ANOTHER NULL CHECK
         <div>
                  {!!this.state.data ? filteredData.map(i => <Card person={i} key={i.created} planet={this.props.planets} />) : null}
         </div>
   ))}

ДЕТСКИЙ КОМПОНЕНТ КАРТЫ 

  class Card extends Component {

     //WHERE I WANT TO PUT THE PROPS
     constructor(){
       super();
       this.state={
         edit: false,
         name: this.props.person.name,
         birthYear: this.props.person.birth_year
       }
     }


      render() {
        let world = null;
        //ANOTHER NULL CHECK
        if(this.props.planet){
           this.props.planet.map(i => {
             if(i.id === this.props.person.id){
              world = i.name
        }
    })
  }

  return (
    <div>
        //THIS IS WHERE I WANT THE VALUE TO BE STATE
        {this.state.edit ? <input label="Name" value={this.state.name}/> : <div className='card-name'>{name}</div>}

    </div>

Ответы [ 2 ]

0 голосов
/ 04 сентября 2018

Хорошо, в этом случае я создаю маленького помощника для ожидания в моем магазине редуксов. Я извлекаю данные куда-то (приложение) и отображаю подключенный компонент в ожидании извлеченных данных в хранилище: 

const Loader = (props) => {
  if (!props.loaded) {
      return null;
  }
  <Card data={props.data}/> 
}

const CardLoader = connect (state => {
  return {
    loaded: state.data !== undefined
    data: state.data
   }
 })(Loader)


  <CardLoader />
0 голосов
/ 04 сентября 2018

Вам необходимо обновить состояние при поступлении данных. Вы можете сделать это так: 

import React, { Component } from 'react';
import './App.scss';
import Card from './Components/Card/Card.js';

class App extends Component {

constructor(){
    super();
    this.state = {
        loading:true,
        cards:[]
    };
}

componentDidMount(){
    this.loadCardsFromServer();
}

loadCardsFromServer = () => {
    let cardsResponseArray = [];

    // fetch your cards here, and when you get data:
    // cardsResponseArray = filterFunction(response); // make function to filter

    cardsResponseArray = [{id:1,name:'aaa'},{id:2,name:'bbb'}];
    setTimeout(function () {
        this.setState({
            loading:false,
            cards: cardsResponseArray
        });
    }.bind(this), 2000)
};

render() {
    if(this.state.loading === true){
        return(
            <h1>loading !!!!!!!!</h1>
        );
    } else {
        return (
            <div>
                {this.state.cards.map(card => (
                    <Card key={card.id} card={card}></Card>
                ))}
            </div>
        );
    }

    }
}
export default App;

А потом в вашей карточке компонент: 

import React, { Component } from 'react';

class Card extends Component {

constructor(props){
    super(props);
    this.props = props;
    this.state = {
        id:this.props.card.id,
        name:this.props.card.name
    };
}

render() {
    return (
        <div className={'class'} >
            Card Id = {this.state.id}, Card name = {this.state.name}

        </div>
    );
}
}

export default Card;

Для тех, кто интересуется состоянием React и методами жизненного цикла иди сюда

...