只更新/刷新子组件

我创建了一个表，其中包含从服务器获取的数据。我使用下面的代码每隔xx秒更新数据，但是当它更新时刷新页面。作为一个用户，这会变得非常烦人，因为无论你在做什么都会被重置。只更新/刷新子组件

因此，我试图找到一种方法，只使我的表更新没有其他组件刷新。

容器>表>行是我的组件层次结构。

setTimeout(() => store.dispatch(fetchData('shops')), i);

fetchData（）

 return Object.assign({}, state, { 
      items: action.dataSet, 
      lastUpdated: action.receivedAt 
     });

谢谢！

我正在使用react和redux。

编辑：我觉得我没有很好地解释我的问题，所以我更新了问题。也许现在更好？

来源

2017-02-23 Naowut

如果你的'items'是对象，你应该使用深度比较 - https://lodash.com/docs#isEqual – Nick

我不明白你的意思：更新数据但不呈现数据？ – Lucas

对不起，我误解了。 – Nick

this.props.data.items !== nextProps.data.items将返回true如果items是一个数组（这好像它是），因为在JS比较时的对象（和阵列是一个对象）时，它是做一个指针比较（例如this.props.data.items === this.props.data.items将返回true）。

您也需要做一次深层的比较（可能使用类似lodash's isEqual）或数组转换为字符串，像这样：JSON.stringify(this.props.data.items) !== JSON.stringify(nextProps.data.items)

还有一些进一步的阅读，而我们在这！ https://ericlathrop.com/2017/02/why-did-this-react-component-rerender/

来源

2017-02-23 20:27:37 Sean

一种方法是将两个阵列放入您的减速器中。一个用于“加载”的项目，另一个用于“传入”项目。

const initialState = { 
    loaded: [], 
    incoming: [] 
};

然后你的组件只能依赖loaded数组。也许以后你想点击一个按钮，你的转储项目incoming到loaded阵列，因此您现在表显示您的排队项目

function incoming(state, action) { 
    return { 
    ...state, 
    incoming: state.incoming.concat(action.incoming) 
    }; 
}

：当新的项目被提取，你把它们添加到incoming阵列：

function loadQueuedItems(state) { 
    return { 
    incoming: [], 
    loaded: state.loaded.concat(state.incoming) 
    } 
}

你可以再调用从减速该功能，当您收到LOAD_INCOMING_ITEMS动作或类似的东西。

希望这会有所帮助！

来源

2017-02-23 22:30:06 Samo

只更新/刷新子组件

回答

相关问题