使用React重新加载页面的一部分 [英] Reload a part of page using React

问题描述

有人知道如何在React中按下自定义刷新按钮时如何重新加载页面的特定部分？

Does anyone have any idea how can I reload a specific part of a page when pressing a customized refresh button in React?

任何人都可以举个例子吗？

Can anyone also give an example?

谢谢！

我的代码：

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
          }))}
        />
  );
}

推荐答案

1. 您的products变量未引用州的任何属性。就像Adrian提到的那样直接在JSX中调用它。

1. Your products variable is not referencing any property from the state. Just call it directly in the JSX as Adrian mentioned.

你需要将JSX包装在一个公共div中。

You need to wrap your JSX within a common div.

我假设您的按钮不是组件，因此下面的更改。 （如果它是一个组件，那么请在你的问题中发布该组件，我会相应地更新这个答案。）

I am assuming your button is not a component hence the change below. (If it is a component, then please post that component as well in your question and I'll update this answer accordingly).

你的渲染没有返回什么都不是。您需要渲染返回您的内容。

Your render is not returning anything as it is. You need to your render to return your content.

---

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

---

Change the render section of your code to the following and let me know what you see in the console:

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

---

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

---

If the problem still persists, please post the <ListComponent/> part of the code as well as the complete code of the above component in your question too.

这篇关于使用React重新加载页面的一部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！