无法读取通过 Redux 传递的 React 功能组件中的 prop

Question

这里是示例反应功能组件

const GreetingPage = (props) => {
  console.log("console log", props)

  return (
    <div>
      <h1>Hello </h1>;
    </div>
  )
}

const mapStatetoProps = (state) => ({
  user: getUser(state)
});


export default connect(mapStatetoProps)(GreetingsPage)

当我执行console.log(props) 时，它会显示以下内容

如果你看到那里有一个用户对象。

我使用以下方法从道具中检索该用户

 const { user } = props
  console.log("second log", user)

我会看到用户数据

    props.user: {
  "uuid": "7dd2sdfs2-c48f-40bb-98d2-251215911d4b",
  "created_at": "2019-11-08T10:03:36.838000Z",
  "username": "joe012",
  "email": "email@gmail.com",
  "name": "Joe",
  "phone_number": null,
  "do_refresh": false,
  "plan": null,
}

最后，当我想获取用户名console.log(user.name)时

它说

TypeError: Cannot read property 'username' of null

出了什么问题？

Answer 1

你可以试试这个：1.Destructuring props

const GreetingPage = ({user}) => {
console.log(user)
  return (
    <div>
      <h1>Hello </h1>;
    </div>
  )
}

const mapStatetoProps = (state) => ({
  user: getUser(state)
});


export default connect(mapStatetoProps)(GreetingsPage)

或者2.解构子元素

const GreetingPage = ({user:{username}}) => {
console.log(user)
  return (
    <div>
      <h1>Hello </h1>;
    </div>
  )
}

const mapStatetoProps = (state) => ({
  user: getUser(state)
});


export default connect(mapStatetoProps)(GreetingsPage)

或 3.在将其作为 porps 发送之前解析对象

const GreetingPage = ({user}) => {
console.log(user)
  return (
    <div>
      <h1>Hello </h1>;
    </div>
  )
}

const mapStatetoProps = (state) => ({
  user: JSON.parse(getUser(state))
});


export default connect(mapStatetoProps)(GreetingsPage)

Answer 2

在您的问题中，您提到您正在调用console.log(user.name)，但您似乎应该调用console.log(user.username)。我认为这只是一个打字错误，可能不是问题的原因，但请仔细检查以确保。

假设这不是导致问题的原因，另一种可能性是用户对象是异步检索的。如果您的组件多次渲染，并且第一次渲染的用户对象是 null，然后一旦检索到用户对象，该组件就会重新渲染用户对象附加到道具，那么这肯定是正在发生的事情。当你打电话时

const { user } = props
console.log("second log", user)

如果 props.user 一开始为空，它不会抛出错误。但是当您调用user.username 时，确实会引发错误，因为您不能调用 null 或 undefined 的属性。要解决此问题，您必须在调用user.username 之前检查user 不是null。例如：

if(user) {
  console.log(user.username)
}

或者，如果您使用 ES2020 或 TS 3.7+，您可以使用可选链： user?.username 这样如果用户是虚假的，那么它只会记录 undefined 而不是抛出错误。

第三种可能性是 lodash 中的 get 方法，您可以在其中放置 _.get(user, 'username') 以确保在调用其属性之前用户对象不为空。