Phản ứng không khởi động lại sau khi setState sử dụng trong lời hứa

Question

Mỗi khi các đạo cụ được thay đổi, thành phần sẽ gọi trênTermChange và nhận được các chi tiết cho thành phần này với lời hứa trả về một mảng các đối tượng.

Vấn đề là khi setState được gọi, không có gì xảy ra và thành phần không được hiển thị lại với chi tiết mới.

module.exports = React.createClass({ 
displayName: 'TaxonomySelect', 

getInitialState: function() { 
    return { 
     children: undefined 
    }; 
}, 

componentDidMount: function() { 
    this.onTermChange(this.props.term); 
}, 

componentWillReceiveProps: function (nextProps) { 
    this.props.term = this.props.term || null; 

    if (this.props.term) { 
     this.onTermChange(nextProps.term.id); 
    } else { 
     this.onTermChange(nextProps.term); 
    } 
}, 

onTermChange: function (term) { 
    this.setState({children: undefined}); 

    TaxonomyStore.getTerm(this.props.term) 
     .bind(this) 
     .then(function (term) { 
      TaxonomyStore.merge(9999,{ 
        description: 'No specific topic', 
        id: 9999 
      }); 
      if (term.path && term.path.length === 3) { 
       term.children.unshift(TaxonomyStore.get(9999)); 
      } 

      console.log(term.id, term.children); 

      this.setState({children: term.children}); 
      this.forceUpdate(); 
      this.render(); 
     }); 
}, 

onSelect: function (id) { 
    if (this.props.onChange) { 
     this.props.onChange(TaxonomyStore.get(id)); 
    } 
}, 

render: function() { 
    if (!Array.isArray(this.state.children) || this.state.children.length < 1) { 
     return null; 
    }; 

    var options = this.state.children.map(function (term) { 
     return { 
      value: term.id.toString(), 
      label: term.description 
     }; 
    }); 

    var value = this.props.value && this.props.value.toString(); 

    return (
     <div> 
      <Select name={this.props.name} value={value} options={options} onChange={this.onSelect} /> 
     </div> 
    ); 
} 
}); 

Answer 1

Bạn không cần phải gọi this.forceUpdate() nếu bạn đang gọi this.setState. Ngoài ra, bạn không bao giờ nên gọi phương thức render của một thành phần.

Thật khó để nói lý do tại sao nó không hiển thị lại nhưng tôi sẽ có một số câu hỏi debugger để xem liệu render có được gọi hay không. Tôi đoán rằng luôn gọi this.onTermChange trong componentWillReceiveProps có thể là một vấn đề tiềm ẩn.

Answer 2

Khi bạn gọi this.setState({children: term.children});this bằng chức năng được xác định trong, không phải thành phần phản ứng.

Có thể ngoại lệ xảy ra, nhưng lời hứa của bạn không gọi .error để bẫy và đăng nhập.

Answer 3

Tôi gặp phải vấn đề tương tự, được lấy cảm hứng từ @ z5h, tôi sử dụng virara địa phương để tham chiếu đến this bên ngoài Promise và hoạt động!

Trong trường hợp của bạn:

onTermChange: function (term) { 
    this.setState({children: undefined}); 

    let _this = this; // change 
    TaxonomyStore.getTerm(this.props.term) 
     .bind(this) 
     .then(function (term) { 
      TaxonomyStore.merge(9999,{ 
        description: 'No specific topic', 
        id: 9999 
      }); 
      if (term.path && term.path.length === 3) { 
       term.children.unshift(TaxonomyStore.get(9999)); 
      } 

      console.log(term.id, term.children); 

      _this.setState({children: term.children}); //change 

     }); 
} 

Thông tin thêm về this trong js: How does the “this” keyword work?