Tiểu bang không cập nhật khi nhận được đạo cụ mới (ReactJS)

Question

Tôi mới sử dụng React. Tôi bị mắc kẹt về điều này, sẽ thực sự đánh giá cao một số trợ giúp!

Thành phần chính sẽ chuyển mảng vào thành phần con này. Khi tôi console.log (this.props.repairs) nó cho tôi thấy một mảng của 4. Tôi đang cố gắng để cập nhật this.state.sortedDataList bất cứ khi nào mảng sửa chữa được thông qua in Console.log (this.state) vẫn còn hiển thị sortDataList dưới dạng một mảng trống.

Tôi đang làm gì sai? Cảm ơn rất nhiều, đánh giá cao sự giúp đỡ nào.

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 không được gọi trên lần hiển thị đầu tiên. Đó là lý do mà bạn không thấy bất kỳ bản cập nhật trong tiểu bang

Từ React Docs:

". Viện dẫn khi một thành phần được nhận đạo cụ mới phương pháp này không kêu gọi ban đầu render"

Nếu bạn chỉ muốn thay đổi lần đầu tiên, bạn có thể sử dụng chức năng vòng đời componentWillMount và cập nhật trạng thái. Ngày tiếp theo thay đổi bạn componentWillReceiveProps sẽ được gọi.

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

Trong constructor của bạn

this.state = { 
    sortedDataList: [] 
}; 

Bạn bước đầu thiết lập trạng thái cho một mảng trống rỗng, vân vân đầu tiên làm cho nó sẽ được sản phẩm nào. Sau đó, bất cứ khi nào các đạo cụ được thay đổi, nó sẽ được cập nhật thông qua componentWillReceiveProps().

Như Shubham đã nói, componentWillReceiveProps() không được gọi trên kết xuất đầu tiên. Nếu bạn muốn trạng thái phản ánh các đạo cụ ngay từ lần render đầu tiên, bạn phải đặt nó vào trong hàm tạo như sau:

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

Answer 3

Đừng bận tâm, đã tìm thấy sai lầm ngớ ngẩn của tôi! Nếu bất kỳ ai khác bị kẹt trong tương lai này ...

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