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

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

您似乎已将 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()，组件将在其 props 更改时默认重新渲染。

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

Answer 2

您的刷新函数需要调用一个获取数据的操作，并相应地更新 Redux 存储。并且因为您已将部分 Redux 状态映射到此组件的道具，所以当通过 reducer 获取和保存该数据时，它将重新呈现。

因此，您根本不需要在此组件中设置本地状态。如果您有一个名为 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 将使其在组件中作为道具可用。

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

Refresh a specific component 's data/ state in React

javascript

reactjs

react-component