Object 值未定義但它在那里 React

Question

我有以下代碼：

export default function ProjectView({filteredProjects,revenueGroups}) {
    const [projects,setProjects] = useState(); 

    useEffect(() => {
        const aap = filteredProjects.map(filteredObject => {
            getProjectFields(filteredObject.projectId).then(res => {
                filteredObject.rekt = res.data[0].id; 
            })
            return filteredObject;
        })
        setProjects(aap);
    },[filteredProjects])

和渲染的組件：

return (
    <div className='main'>
        {projects.map(project => (
            <div className='view-container' key={project._id}>
                {console.log(project)}
            </div>
        ))}
    </div>
)

這很好用，當我像上面那樣 console.log(project) 顯示以下內容時：

{
    projectName: "privaye"
    rekt: "project:1b1126ebb28a2154feaad60b7a7437df"
    __proto__: Object
}

當我 console.log(projectName) 它顯示名稱，但是當我 console.log(project.rekt) 它是未定義的......即使它在那里當我 console.log(project)

Answer 1

已編輯

我沒有注意到里面是 promise：P

useEffect(() => {
  fetchThings()
},[filteredProjects])

const fetchThings = async () => {
  const promArr = filteredProjects.map(filteredObject => {
    return getProjectFields(filteredProject.project.id)
  })
  const filteredObjects = await Promise.all(promArr)
  const projectsMod = filteredObjects.map(fo => ({
    ...fo,
    rekt: fo.data[0].id,
  }))
}

也許這樣的方法可以幫助您解決異步問題

---

console.log 沒有渲染任何東西，所以當項目 state 更新時，React 可能不會嘗試刷新這部分 DOM。

您可以對 object 進行字符串化以檢查返回中變量的內容

return (
    <div className='main'>
        {projects.map(project => (
            <div className='view-container' key={project._id}>
                <span>{ JSON.stringify(project) }</span>
            </div>
        ))}
    </div>
)

Answer 2

You are running promise, after this promise will return value you set rekt , but promise will work god knows when, and most probably you check value before this promise resolved.

getProjectFields(filteredObject.projectId).then(res => {
  // THIS CODE CAN RUN AFTER RENDERING
  filteredObject.rekt = res.data[0].id; 
})

所以首先你等到承諾完成，然后再設置新的 state

const ourPreciousPromises = filteredProjects.map(filteredObject => 
  getProjectFields(filteredObject.projectId).then(res => {
    filteredObject.rekt = res.data[0].id; 
    return {...filteredObject}
  })
})

Promise.all(ourPreciousPromises).then(newObjects => 
  setProjects(newObjects)
)