當props進入組件時，為什么我的react組件沒有重新渲染？

Question

我目前正在一個項目中，我必須對通過redux或將其傳遞給自己的子組件中的每個道具進行空檢查。 我覺得這不正常嗎？ React的巨大優勢不是自動重新渲染嗎？ 如果我嘗試將任何東西置於狀態，那么我就不能這樣做，因為在對數據進行任何處理之前，必須在渲染中進行null檢查。 提前致謝！！

父組件=

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>

Answer 1

您需要在數據到達時更新狀態。 您可以這樣做：

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;

然后在您的Card組件中：

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狀態和生命周期方法感興趣的人， 請點擊此處

Answer 2

好的，在這種情況下，我在redux商店中為等待狀態創建了一個小助手。 我在某處（應用程序）獲取數據，並渲染一個連接的組件，等待存儲中獲取的數據：

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