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状态和生命周期方法go here感兴趣的人

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

道具进入组件后，为什么我的react组件没有重新渲染？

2 个答案: