Stan nie aktualizuje się podczas odbierania nowych rekwizytów (ReactJS)

Question

Jestem nowy w React. Utknąłem na tym, naprawdę doceniam jakąś pomoc!

Element macierzysty przekaże tablicę do tego komponentu potomnego. Kiedy I console.log (this.props.repairs) pokazuje mi tablicę 4. Próbuję zaktualizować this.state.sortedDataList, gdy tablica napraw jest przekazywana. Konsola.log (this.state) jest nadal pokazując sortedDataList jako pustą tablicę.

Co robię źle? Wielkie dzięki, doceń każdą pomoc.

class Repairs extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     sortedDataList: [] 
    }; 
    } 

    componentWillReceiveProps(nextProps) { 
    if(this.props != nextProps) { 
     this.setState({ 
     sortedDataList: this.props.repairs 
     }); 
    } 
    } 

    render() { 
    console.log(this.props); 
    console.log(this.state); 

    return (
     <div></div> 
    ); 
    } 
} 

Answer 1

componentWillReceiveProps nie jest wywoływany przy pierwszym renderowaniu. To jest powód, że nie widać żadnych aktualizacji w stanie

Od React Docs:

. „Wywołuje się, gdy składnik odbiera nowe rekwizyty Metoda ta nie jest wywoływana dla początkowego render”

Jeśli chcesz wprowadzić zmianę tylko za pierwszym razem, możesz skorzystać z funkcji cyklu życia componentWillMount i zaktualizować stan. Po kolejnej zmianie zostanie wywołana funkcja componentWillReceiveProps.

class Repairs extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 

 
    this.state = { 
 
     sortedDataList: [] 
 
    }; 
 
    } 
 

 
    componentWillMount() { 
 
    
 
     this.setState({ 
 
     sortedDataList: this.props.repairs 
 
     },() => console.log(this.state.sortedDataList)); 
 
    
 
    } 
 
    componentWillReceiveProps(nextProps) { 
 
    if(this.props != nextProps) { 
 
     this.setState({ 
 
     sortedDataList: nextProps.repairs 
 
     }); 
 
    } 
 
    } 
 

 
    render() { 
 
    console.log("r",this.props); 
 
    console.log("r",this.state); 
 

 
    return (
 
     <div></div> 
 
    ); 
 
    } 
 
} 
 

 
class App extends React.Component { 
 
    render() { 
 
    var arr = ["1", "2", "3"]; 
 
    return (
 
     <div > 
 
     <Repairs repairs={arr}/> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 
ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script> 
 
<div id="app"></div>

Answer 2

W konstruktora

this.state = { 
    sortedDataList: [] 
}; 

początkowo ustawiony stan na pustą tablicę, więc na pierwszy czyni to będzie pusta. Następnie, gdy rekwizyty zostaną zmienione, zostaną zaktualizowane za pomocą metody componentWillReceiveProps().

Jak powiedział Shubham, componentWillReceiveProps() nie jest wywoływana w pierwszym renderowaniu. Jeśli chcesz, aby odzwierciedlić stan rekwizyty prawo od pierwszego render, trzeba by umieścić go w konstruktorze tak:

this.state = { 
    sortedDataList: this.props.repair 
}; 

Answer 3

Nieważne, że mój głupi błąd! Jeśli ktokolwiek inny utknie w tym w przyszłości ...

componentWillReceiveProps(nextProps) { 
    if(this.props != nextProps) { 
    this.setState({ 
     sortedDataList: nextProps.repairs 
    }); 
    } 
}