Question

React：props 未定义，但当我使用 console.log(props) 时，它可以工作

2021-09-05

5709

javascript reactjs react-props

我有一个箭头函数返回以下内容：

  return (
    <div className="posts">
      <Post />
      {dataApi.map((post) => {
        return <Post post={post} key={uuidv4()} />;
      })}
    </div>
  );
};

在我的 Post 组件中，我尝试导入作者、日期和传递的文本，但它告诉我这些数据未定义。但是，当我 console.log（post）时，我的数据出现了......代码如下：

const Post = ({post}) => {
  //const {author, date_creation, message} = post
  return (
    <div className="post">
      <div className="post__author_group">
        <Avatar className={"post__avatar"} />
        <div className="post__author_and_date">
          <Author className="post__author" author={'author'} />
          <Date className="post__date" date={'date_creation'} />
        </div>
      </div>
      <Text message={'message'} />
      {/* <Media /> */}
      <Interactions />
    </div>
  );
};

如果我 console.log（post），我可以看到我的 5 个对象，但如果我取消注释“//const {author, date_creation, message} = post”并将 author = {'author "} 替换为 author = {author}（这是一个 prop），它会给我“TypeError：无法解构属性'author'of'post'，因为它未定义。”

我不知道这是否相关，但是当我 console.log（post）时，在我的控制台中，在我拥有对象之前，我有两个“未定义”，但我不知道它来自哪里。我的控制台：

Post.js: 12 undefined
Post.js: 12 undefined
Post.js: 12 {id: 1, message: 'Hello World', date_creation: '2020-11-11T10: 11: 11.000Z', author: 'Vincent'}
Post.js: 12 {id: 2, message: 'Hello World', date_creation: '2020-11-11T10: 11: 11.000Z', author: 'Vincent'}
Post.js: 12 {id: 3, message: 'Hello World', date_creation: '2017-06-29T15: 54: 04.000Z', author: 'Vincent'}
Post.js: 12 {id: 4, message: 'Hello World', date_creation: '2021-09-03T13: 50: 33.000Z', author: 'Vincent'}
Post.js: 12 {id: 5, message: 'Hello World', date_creation: '2021-09-03T13: 50: 49.000Z', author: 'Vincent'}

Answer 1

这是因为您的数据在首次加载组件时尚未加载。请尝试以下操作：

const Post = ({post}) => {
if(post){
 const {author, date_creation, message} = post // You can destructure here 
 return (
    // ....
  );
}
else return null;
};

或者

如果您已收到所有数据，请加载上述组件

 return (
    <div className="posts">
      <Post />
      {dataApi && dataApi.length > 0 && dataApi.map((post) => {
        return <Post post={post} key={uuidv4()} />;
      })}
    </div>
  );