Firebase/React:在创建之前获取文档ID

Question

我想在提交之前在firebase add上分配ID。

const ref = firebase.firestore().collection('trips').doc();
const tripid = ref.id;

这工作得很好，但我注意到每次我在提交之前修改或编辑字段时，这个tripid变量都会发生变化。基本上，我有一个上传函数，它将文档存储在用户ID/tripid下。

如果指定ref.id的const -我如何避免在字段编辑时发生这种变化?如果他们上传一个文档，它会在那个时候进入ID，然后如果他们在提交ID更改之前编辑其他字段，那么引用就会丢失。

Answer 1

假设你的组件函数看起来像这样:

function YourComponent({ props }) {
const [firstName, setFirstName] = useState("");  
const [lastName, setLastName] = useState("");
const ref = firebase.firestore().collection('trips').doc();
const tripid = ref.id;
return ( /* ... form ... */ );
}

每次组件渲染时，生成的ref都会改变。

为了防止这种情况，您需要引入一个函数，该函数只生成一次引用，并且在重新绘制组件时保持不变。这可以使用useMemo来完成。

function YourComponent({ props }) {
const [firstName, setFirstName] = useState("");  
const [lastName, setLastName] = useState("");

// create `ref` once on the first render, don't recompute it even on redraws
const ref = useMemo(
() => firebase.firestore().collection('trips').doc(),
[] // no dependencies, don't recompute
);
const tripid = ref.id;
return ( /* ... form ... */ );
}

但是在将来useMemo将不能这样使用(并且它在其文档中警告这样使用)，所以我们可以创建自己的，像这样:

// fork of useMemo, this can be elsewhere in your code so you can reuse it
function usePersistentObject(init, deps) {
const obj = useRef(null);
const prevDeps = useRef(deps || []);
if (obj.current === null || !(prevDeps.current.length === deps.length && prevDeps.current.every((v, i) => deps[i] === v))) { // rough shallow equals, could use a library
// either first render or deps array values changed
obj.current = init();    // compute
prevDeps.current = deps; // save dependency state
}
return obj.current;
}
function YourComponent({ props }) {
const [firstName, setFirstName] = useState("");  
const [lastName, setLastName] = useState("");

// create `ref` once on the first render, don't recompute it even on redraws
const ref = usePersistentObject(
() => firebase.firestore().collection('trips').doc(),
[] // no dependencies, don't recompute
);
const tripid = ref.id;
return ( /* ... form ... */ );
}

注意:如果YourComponent被卸载，引用将会改变!