React Native setState issue using an Object with TypeScript

Question

I am having trouble with the setState of objects. My interface definition is as follows;

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

I access the parameter I sent with RootStackParamList as follows.

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 output is as follows. Where am I going wrong? Why can't I assign a value to project?

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

topdev87 · Accepted Answer · 2020-11-30 18:49:54Z

1

setProject is the asynchronous method, and you can't get the updated project value right immediately after setProject.

You should use useEffect with adding a project dependency to get an updated project value.

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

answered Nov 30, 2020 at 18:49

topdev87

8,7913 gold badges11 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Native setState issue using an Object with TypeScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related