当props进入组件时，为什么我的react组件没有重新渲染？

Question

I am currently in a project, and I have had to do null checks on every single props that has come in to children components wether through redux or passing it in myself. I feel like that is not normal with react? Isn't a huge plus side of React is automatic re-rendering? If I try to put anything into state, I can't because There has to be a null check in the render before I do anything with the data. Thanks in advance!!

PARENT COMPONENT =

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>
   ))}

CHILD COMPONENT OF CARD

  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>

Answer 1

You need to update state when data arrive. You can do it like this:

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;

And then in your Card component:

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;

For those interested about React state and lifecycle methods go here

Answer 2

Okay, in this case i craft a little helper's for waiting state in my redux store. I fetch data somewhere (app) and i render a connected component waiting for fetched data in store:

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 />