使用带有 TypeScript 的对象反应本机 setState 问题答案

【问题标题】：React Native setState issue using an Object with TypeScript使用带有 TypeScript 的对象反应本机 setState 问题
【发布时间】：2021-03-12 17:15:58
【问题描述】：

我遇到了对象的 setState 问题。我的接口定义如下；

export interface IProjectData {
  Id?: string,
  Description?: string,
  ProjectState?: string,
}

我使用 RootStackParamList 访问我发送的参数如下。

function ProjectScreen({ route, navigation }: ProjectProps) {
  const [project, setProject] = useState<IProjeData>(null)

  useEffect(() => {
    const sProject = JSON.stringify(route.params.project)
    let myProject: IProjeData = JSON.parse(sProject)
    console.log('myProject: ')
    console.log(myProject)
    setProject(myProject)
    console.log('Project: ')
    console.log(project)
  }, [])

  return (
    ...
    ...
  )}

Consol 输出如下。我哪里错了？为什么我不能为项目赋值？

myProject: 
{Id: "bd7acbea", Description"My Test Project", ProjectState"25/25"}
Project: 
null

【问题讨论】：

标签： typescript react-native react-hooks setstate

【解决方案1】：

setProject 是异步方法，不能在setProject 之后立即获取更新后的project 值。

您应该使用 useEffect 并添加 project 依赖项以获得更新的 project 值。

useEffect(() => {
  console.log(project)
}, [ project ])

【讨论】：