reactjs - 我应该使用 forceUpdate() 还是寻找另一种方法来重新渲染 React 组件

Question

我有这个组件，我想在我的 api 调用后重新呈现。我无法弄清楚为什么在 getWinks 的 api 调用之后，winks-count 确实更新但不在 View 上，除非我刷新。我不应该使用 this.forceUpdate() 吗？欢迎指教，欢迎批评。

export default class Winks extends Component {
  constructor (props) {
    super(props)
    this.insertDecimal = this.insertDecimal.bind(this)
    this.state = ({
      user:cookie.load('user',
    )})
    console.log(this.state)
    this.httpHandler = axios.create({
      baseURL: 'localhost:3000',
      headers: {
        'Authorization': this.state.user.token
      }
    })
  }

  insertDecimal(num) {
     var num = (num / 100).toFixed(2);
     return '$' + num
  }
 getWinks (itemId) {
   this.httpHandler.post("/users/" + this.state.user.id + "/winks", {
      user_id:this.state.user.id,
      wink: {
        product_id:itemId
      }
   }).then(function (response){
     this.forceUpdate()
   }.bind(this))
 }

  render () {
    var listItems = this.props.products.map(function(item, index,) {
      var wink = item.attributes
      if (index % 5 ===0) {
        return (
          <Col lg={2} md={4} sm={4} xs={6}>
            <div className="item">
              <img className='img-responsive' src={wink["image-url"]}></img>
              <div className="item-meta">
                <span className="name">{wink.name}</span>
                <span className="site"> Bloomingdales.com</span>
                <div className="rate">
                  <span className="old">{this.insertDecimal(wink.price)}</span>
                  <span className="new">{this.insertDecimal(wink["sale-price"])}</span>
                </div>
                <div className="like">
                  <i onClick={()=>this.getWinks(item.id)} className="fa fa-heart"></i>
                  <span>{wink["winks-count"]}</span>
                </div>
              </div>
            </div>
          </Col>
        )
      }
      else {
        return (
          <Col lg={2} md={4} sm={4} xs={6}>
            <div className="item">
              <img className='img-responsive' src={wink["image-url"]}></img>
              <div className="item-meta">
                <span className="name">{wink.name}</span>
                <span className="site"> Bloomingdales.com</span>
                <div className="rate">
                  <span className="old">{this.insertDecimal(wink.price)}</span>
                  <span className="new">{this.insertDecimal(wink["sale-price"])}</span>
                </div>
                <div className="like">
                  <i onClick={()=>this.getWinks(item.id)} className="fa fa-heart"></i>
                  <span>{wink["winks-count"]}</span>
                </div>
              </div>
            </div>
          </Col>
        )
      }
    }.bind(this));
    return (
        <Row className="item-row">
          {listItems}
        </Row>
    )
  }
}

父组件:

export default class AllItems extends Component {
  constructor () {
    super()
    this.state=({ user: cookie.load('user')})
    this.httpHandler = axios.create({
      baseURL: 'localhost:3000',
      headers: {
        'Authorization': this.state.user.token
      }
    })
  }

  componentWillMount() {
    this.httpHandler('/products/')
    .then(function (response) {
      this.setState({ winks: response.data.data})
    }.bind(this))
  }
  render() {

      return (
        <Grid>
          <div className="item-wrapper">
            <Row>
              <h1 className="text-center">All Items</h1>
            </Row>
            <Row>
              <Col xs={2}>
                <div className="item-sidebar-wrapper">
                  <div className="sort">
                    <Sort />
                  </div>
                  <div className="category">
                    <Category />
                  </div>
                  <div className="price">
                    <Price />
                  </div>
                  <div className="size">
                    <Size />
                  </div>
                  <div className="color">
                    <Color />
                  </div>
                  <div className="brand">
                    <Brand />
                  </div>
                  <div className="stores">
                    <Stores />
                  </div>
                </div>
              </Col>
              <Col xs={10}>
                <Winks products={this.state.winks} />
              </Col>
            </Row>
          </div>
        </Grid>
      )

Answer 1

通常，您永远不必使用 forceUpdate()。相反，您应该使用 this.setState() 来更新数据，因为它会让您的组件使用新数据自动重新呈现。

从您的示例中不清楚，但假设 getWinks() 方法中的 response 参数包含更新的产品，它应该用于更新状态。

但是由于您使用 props 从父级获取初始产品，因此您需要将更新后的产品传回父级并让它运行 this.setState({ products })(这将触发重新渲染，然后导致您显示的组件使用新数据重新渲染)。