Question

有人知道在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
          }))}
        />
  );
}

Answer 1

我不知道这是否应该做，但这是我使用的一种技巧

将div置于状态中的属性中（我们将其称为element）。然后，当您调用refreshFunction ()时，请用空的this.state.element（或在获取新数据时应显示的自定义div）更改div中的内容。提取新数据后，将其放回this.state.element中，并更新所需的任何其他属性。

Answer 2

您的产品变量未引用该状态的任何属性。就像Adrian所说的那样，直接在JSX中调用它即可。
您需要将JSX包装在一个普通的div中。
我假设您的按钮不是组件，因此下面进行了更改。（如果它是一个组件，那么也请在您的问题中发布该组件，我将相应地更新此答案）。
您的渲染没有返回任何内容。您需要渲染以返回您的内容。

将代码的渲染部分更改为以下内容，并让我知道您在控制台中看到的内容：

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

如果问题仍然存在，请在问题中张贴代码的<ListComponent/>部分以及上述组件的完整代码。

使用React重新加载页面的一部分

2 个答案: