Question

我有一个产品列表ID和一个按钮。当我按下按钮时，我想刷新ListComponent中的数据。我不知道如何在React中做到这一点。有人可以帮我吗？

constructor(props) {
    super(props);
    this.state = {
      products: this.props.productData //where productData an array of all products-ID
    };
    this.refresh = this.refresh.bind(this);
 }  


  refresh() {
    this.setState({ products: null });
    this.forceUpdate();
  }

  render() {
    const { products } = this.state;
          <Button onClick={this.refresh} />
          <ListComponent
            data={products.map(entry => ({
              text: entry.productId
            }))}
          />
    );
  }
}

const mapStateToProps = (state, ownProps) => {
  const products = selectAllProducts(state); //function that fetches-takes all products
  return {
    productData: products.map(products => ({
      productId: product.get("productId")
    }))
  };
};

Answer 1

您的刷新功能需要调用一个操作以获取数据，并相应地更新Redux存储。而且由于您已将Redux状态的一部分映射到该组件的props，因此当通过化简器获取并保存该数据时，它将重新呈现。

因此，您完全不需要在此组件中设置本地状态。假设您有一个名为fetchProductData的操作：

class ProductList extends React.Component {
  constructor (props) {
    super(props)
    this.refresh = this.refresh.bind(this)
  }

  // if you don't already have the data in your store, you can fetch it here to kick things off
  componentDidMount () {
    this.props.fetchProductData()
  }

  refresh () {
    this.props.fetchProductData()
  }

  render () {
    const { products } = this.state
    return (
      <div>
        <Button onClick={this.refresh} />
        <ListComponent
          data={products.map(entry => ({
            text: entry.productId
          }))}
        />
      </div>
    )
  }
}

const mapStateToProps = (state, ownProps) => {
  const products = selectAllProducts(state)
  return {
    productData: products.map(products => ({
      productId: product.get("productId")
    }))
  }
}

export default connect(mapStateToProps, { fetchProductData })(MyComponent)

同样，这假设fetchProductData调度一个操作，该操作将更新存储产品的redux状态。像这样将动作传递到connect，将使其可以作为组件中的道具使用。

Answer 2

您似乎已将refresh()放置在构造函数中，请尝试：

constructor(props) {
    super(props);
    this.state = {
      products: this.props.productData //where productData an array of all products-ID
    };
    this.refresh = this.refresh.bind(this);
}

refresh() {
  this.setState({ products: null });
  this.forceUpdate();
}

render() {
  const { products } = this.state;
        <Button onClick={this.refresh} />
        <ListComponent
          data={products.map(entry => ({
            text: entry.productId
          }))}
        />
  );
}

我做了一个最小的组件，可以完成您想要的操作。我没有在构造函数中绑定，而是使用粗箭头功能进行刷新。

import { Component } from "react";

const ListItem = props => props.item.text;

class List extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [{ id: 0, text: "zero" }, { id: 1, text: "one" }]
    };
  }

  refresh = () => {
    this.setState({ items: [] });
  };

  render() {
    const { items } = this.state;
    return (
      <div>
        {items.map(i => (
          <div key={i.id}>
            <ListItem item={i} />
          </div>
        ))}
        <button onClick={this.refresh}>refresh</button>
      </div>
    );
  }
}

export default List;

您不需要forceUpdate()，默认情况下，更改其道具后，组件将重新渲染。

要了解粗箭头及其对this的作用，请查看https://hackernoon.com/javascript-es6-arrow-functions-and-lexical-this-f2a3e2a5e8c4。

在React中刷新特定组件的数据/状态

2 个答案: