2015-03-30 29 views
7

Tôi có một thành phần React quản lý nhiều accordion trong một danh sách, nhưng khi tôi cập nhật một đứa trẻ, trên công cụ React dev, nó đã hiển thị văn bản cập nhật nhưng trên view/ui, nó không cập nhật. Làm ơn cho lời khuyên.Phản ứng thành phần xem không nhận được cập nhật

var AccordionComponent = React.createClass({ 
    getInitialState: function() { 
    var self = this; 
    var accordions = this.props.children.map(function(accordion, i) { 
    return clone(accordion, { 
    onClick: self.handleClick, 
    key: i 
    }); 
}); 

    return { 
    accordions: accordions 
    } 
}, 
handleClick: function(i) { 
    var accordions = this.state.accordions; 

    accordions = accordions.map(function(accordion) { 
    if (!accordion.props.open && accordion.props.index === i) { 
     accordion.props.open = true; 
    } else { 
     accordion.props.open = false; 
    } 
    return accordion; 
    }); 

    this.setState({ 
    accordions: accordions 
    }); 
}, 
componentWillReceiveProps: function(nextProps) { 
    var accordions = this.state.accordions.map(function(accordion, i) { 
    var newProp = nextProps.children[i].props; 

    accordion.props = assign(accordion.props, { 
     title: newProp.title, 
     children: newProp.children 
    }); 

    return accordion; 
    }); 

    this.setState({ 
    accordions: accordions 
    }); 
}, 
render: function() { 
    return (
    <div> 
     {this.state.accordions} 
    </div> 
); 
} 

enter image description here

enter image description here

Edit:
Các thành phần đã kích hoạt componentWillReceiveProps sự kiện, nhưng nó vẫn không bao giờ được cập nhật.

Cảm ơn

Trả lời

3

Sau nhiều ngày cố gắng giải quyết vấn đề này, tôi đã đưa ra giải pháp. componentWillReceiveProps sự kiện đã được kích hoạt khi đạo cụ của thành phần thay đổi, do đó, không có vấn đề về điều đó. Vấn đề là trẻ em của AccordionListComponent, AccordionComponent không cập nhật giá trị/đạo cụ/tiểu bang của nó.

giải pháp hiện tại:

componentWillReceiveProps: function(nextProps) { 
var accordions = this.state.accordions.map(function(accordion, i) { 
    // get current accordion key, and props value 
    // update new props with old 
    var newAc = clone(accordion, nextProps.children[i].props); 

    // update current accordion with new props 
    return React.addons.update(accordion, { 
     $set: newAc 
    }); 
    }); 

this.setState({ 
    accordions: accordions 
}); 
} 

Tôi đã cố gắng để làm chỉ tạo bản sao và thiết lập lại các accordions, nhưng dường như nó không cập nhật các thành phần.

Cảm ơn

1

Tôi gặp sự cố tương tự. Vì vậy, nó có thể có liên quan để báo cáo giải pháp của tôi ở đây.


Tôi đã có một đồ thị mà không nhận được cập nhật bất cứ lúc nào tôi nhấn một lần vào nút tải dữ liệu (Tôi có thể thấy thay đổi hình ảnh sau khi nhấp chuột thứ hai).

Thành phần biểu đồ được thiết kế dưới dạng phần tử con của thành phần chính (được kết nối với kho lưu trữ Redux) và dữ liệu được truyền qua đó dưới dạng giá đỡ.

Sự cố: dữ liệu được tìm nạp đúng cách từ cửa hàng (trong bố mẹ) nhưng có vẻ như thành phần biểu đồ (con) không phản ứng với chúng.

Giải pháp:

componentWillReceiveProps(nextProps) { 
    this.props = null; 
    this.props = nextProps; 
    // call any method here 
    } 

Hy vọng rằng sẽ có thể góp phần trong cách nọ cách kia.

Các vấn đề liên quan