Question

因此，基本上，对于每个“发布”组件，我都想进入数据库并检查我的用户是否喜欢该发布。为此，我正在做以下事情。注意点赞状态是检查点赞按钮是否被“按下”的状态。

const getLike = ()=>{
        if(!props.item.item){
            const a = db().collection("posts").doc(props.item.id).collection("likes").doc(props.myInfo.uid).get()
            .then((data)=>{
                if(data){
                       return true
                }
             })
            }
    return false
}


const [liked, setLiked] = useState(getLike())

此问题是由于某种原因它总是返回false。我在做什么错了？

Answer 1

这是因为getLike中的if部分正在调用Promise，并在可链接的then中返回true。

您应按以下步骤更改代码：

const [liked, setLiked] = useState(false);

const getLike = ()=>{
        if(!props.item.item){
            const a = db().collection("posts").doc(props.item.id).collection("likes").doc(props.myInfo.uid).get()
            .then((data)=>{
                if(data){
                       setLiked(true) // we call our setLiked after the promise has resolved.
                }
             })
            }
}

useEffect(() => getLike(), []) // we want to call getLike() only once after the component has mounted.

Answer 2

这里的问题是您正在使用Promise，即db().collection("posts")....是异步的，因此.then仅在从服务器接收到响应时才被调用。但是它不会停止执行代码中的下一行，即return false。因此，在进行db().collection("posts")....调用之后，下一行也将被执行。这就是为什么总是返回false的原因。

以下提供了模拟Promises

的示例

const promiseFn = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Resolved")
    }, 1000)
  })
}

const promiseFnCall1 = () => {
  promiseFn().
  then(res => console.log(res))
  
  //This will be executed before `promiseFn` returns the response
  console.log("This is executed first");
}

promiseFnCall1();


//If there's some operation that needs to be performed only
//after the success response from a Promise that should be
//done in .then method
const promiseFnCall2 = () => {
  promiseFn().
  then(res => {
    console.log(res);
    console.log("This is the correct order of execution");
  }) 
}

promiseFnCall2();

此外，建议不要使用useState来初始化状态，而是可以使用默认值false初始化状态并使用useEffect来获取状态数据后端并进行相应的更新。

const [liked, setLiked] = useState(false);

useEffect(() => {
  if (!props.item.item) {
    const a = db().collection("posts").doc(props.item.id).collection("likes").doc(props.myInfo.uid).get()
      .then((data) => {
        if (data) {
          setLiked(true)
        }
      })
  }
}, [])

希望这会有所帮助。

使用函数初始化状态值

2 个答案: