子反应流中的访问对象道具

Question

I have a parent component that passes a prop into the child component. When I try to access the prop by prop.a.name or prop.a.avatar. I receive the following errors from flow :

property name Property cannot be accessed on property a of unknown type property name Property cannot be accessed on possibly undefined value

Here is the part of the parent

const items = (authors, authorId) => {
const author = authors.find(a => a.id === authorId)
  const info = {
   name: author ? author.name : '',
   profileImage: author ? author.profileImage : '',
   company: author ? author.company : '',
 }
  return info
}

Now if I return info.name or info.profileImage it passes but I want to pass this object into the child so I can access where needed in child component.

Here is the child

 type Props = {
  info: string
}

const child = (props: Props) => { 
   ... some code 
   <h1>{props.info.name}</h1> 
}

Answer 1

Try with:

const items = ({authors, authorId}) => {
const author = authors.find(a => a.id === authorId)
const info = {
  name: author ? author.name : '',
  profileImage: author ? author.profileImage : '',
  company: author ? author.company : '',
 }
 return info
}

This is beacause authors and authorId need to be extracted from props Object.