我在我的本机应用程序中使用了很多 firestore 快照。我也在使用 React 钩子。代码如下所示:
useEffect(() => {
someFirestoreAPICall().onSnapshot(snapshot => {
// When the component initially loads, add all the loaded data to state.
// When data changes on firestore, we receive that update here in this
// callback and then update the UI based on current state
});;
}, []);
Run Code Online (Sandbox Code Playgroud)
起初我认为useState这是存储和更新 UI 的最佳钩子。但是,根据我的useEffect钩子设置空依赖数组的方式,当快照回调被更新的数据触发并且我尝试用新的更改修改当前状态时,当前状态是未定义的。我相信这是因为关闭。我能得到它的周围使用useRef了forceUpdate()像这样:
const dataRef = useRef(initialData);
const [, updateState] = React.useState();
const forceUpdate = useCallback(() => updateState({}), []);
useEffect(() => …Run Code Online (Sandbox Code Playgroud) firebase reactjs google-cloud-firestore react-native-firebase react-hooks
我正在使用我在网上找到的主要使用css创建的数据表.在其中一列中有一个css数据属性"data-title",它被赋予一个字符串.
<td data-title="someString">
Run Code Online (Sandbox Code Playgroud)
当我输入一个字符串时,列内的样式按预期工作.当我尝试绑定到对象字符串时,绑定不会像我期望的那样工作.我试过了
<td data-title="object.someString">
Run Code Online (Sandbox Code Playgroud)
它只显示文字'object.someString'而我试过了
<td data-title="{{object.someString}}">
Run Code Online (Sandbox Code Playgroud)
什么都没显示(空白).知道为什么我的绑定在这里不起作用吗?
CSS:
.responsive-table tbody td[data-title]:before {
content: attr(data-title);
float: left;
font-size: .9em;
color: #565248;
}
@media (min-width: 48em) {
.responsive-table tbody td[data-title]:before {
content: none;
}
}
Run Code Online (Sandbox Code Playgroud)