Question

我尝试在本机应用中重新加载子页面。实际上我是从组件导入我的子页面。像这样：

import {Input,Button, Logo, Topcart,Heading, BackgroundWrapper,Navigation, AlertStatus,Header,Footer} from '../components';

显示产品数量的Topcart页面。点击添加到购物车按钮，所有产品都设置在cookie中。当我点击添加到购物车按钮而不是设置为cookie的新项目和页面设置到购物车页面Actions.cart（{data：responseText}）但在购物车页面购物车计数不更新。当我点击我的移动后退按钮返回上一页并再次添加到购物车而不是显示之前的计数。我该如何刷新我的子页面。 Topcart页面是这样的： -

fetchData(){ 
    AsyncStorage.getItem('userid', (err, result) => {
      if(result){ 
         cookie.getAll().then(function(cookies){                     
             fetch('https://www.furnitureinfashion.net/app_cookies_count.php?customerId='+result, {
                 method: 'POST',
                 headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                 },                 
                     body: JSON.stringify(cookies)
              }).then((response) => response.text())
              .then((responseJson) => {                                         
                                cartCount = responseJson;

              })
             .catch((error) => {
                 console.error(error);
              });

            });
        }
        else{
cookie.getAll().then(function(cookies){                  
             fetch('https://www.furnitureinfashion.net/app_cookies_count.php', {
                 method: 'POST',
                 headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                 },                 
                     body: JSON.stringify(cookies)
              }).then((response) => response.text())
              .then((responseJson) => {                                         
                                cartCount = responseJson;

              })
             .catch((error) => {
                 console.error(error);
              });

            });



            }
    })        
    }

  componentWillMount(){    
        this.fetchData();
    }

在购物车页面上导入如下：从'../ components'导入{Input，Button，Logo，Topcart，Heading，BackgroundWrapper，Navigation，AlertStatus，Header，Footer};

render() {
return(
<View>                
 <Topcart/>         
)
}

Answer 1

根据您的描述，TopCart仅在加载时设置计数，而不是在添加新值时更新。

如果您想要更新TopCart，那么您需要一种方法来实现。您可能希望查看使用状态。这意味着将有一个州负责持有cartCount。然后当计数更新时，因为TopCart正在观看它，一旦它改变，TopCart将重新渲染。

我现在不确定你在使用cartCount做什么。是否可以作为道具传递给TopCart？您可以执行以下操作：

<Topcart cartCount={cartCount} />

然后在TopCart组件中，您可以引用this.props.cartCount。由于这是TopCart中的一个状态，更改它将导致TopCart重新渲染。

另一种更好的方法是使用redux来实现应用程序状态。 TopCart将实现redux connect()()功能并观看一段州。

我可能需要更多信息来帮助您。

刷新子页面重新加载主页反应原生

1 个答案: