Question

// ClientDisplay.js

class ClientDisplay extends Component {

  ...

  render() {

    const {activeClient} = this.props

    console.log(activeClient); // This works fine

    const clientGroupMenu = (
      <div>
        <SelectMenu
          defaultValue={activeClient.groupName}
          ...
    )

    return (
      <div>{clientGroupMenu}</div>
    )

  }
}

export default ClientDisplay

// View.js

export class View extends Component {

  ...

  render(){
    return (
      <ClientDisplay
         {...this.props}
      />
    )
  }
  ...
}

您会看到console.log(activeClient)行记录了正确的数据。

但是我在defaultValue={activeClient.groupName}上遇到错误

index.es.js:1 Uncaught TypeError: Cannot read property 'props' of null

如果我使用defaultValue={this.props.activeClient.groupName}

，我也会遇到相同的错误

有人知道为什么我无法从该组件clientGroupMenu中访问这些属性。

谢谢

Answer 1

将ClientGroupMenu移至无状态功能组件可能会有所帮助。

const ClientGroupMenu = ({activeClient}) => {
  const {groupName} = activeClient

  return (
    <div>
      <SelectMenu
        defaultValue={groupName}
        ...
  )
}


class ClientDisplay extends Component {

  ...

  render() {

    const {activeClient} = this.props

    console.log(activeClient); // This works fine

    return (
      <div><ClientGroupMenu activeClient={activeClient} /></div>
    )

  }
}

Answer 2

以下是示例格式，您应在构造函数内部使用super()

class ClientDisplay extends Component {

    constructor(props) {
        super(props);
    }

    [...]
}

如果遇到相同的错误，请在各处使用self.props而不是this.props！

Answer 3

问题可能是由于销毁结构。使用const activeClient声明代替const {activeClient}

有关解构分配的更多详细信息，请参见https://itnext.io/using-es6-to-destructure-nested-objects-in-javascript-avoid-undefined-errors-that-break-your-code-612ae67913e9。

使用const {activeClient} = this.props时，实际对象的值将复制到activeClient中。您必须使用defaultValue={activeClient}而不是defaultValue={activeClient.groupName}

使用const activeClient = this.props时，此props将在activeClient中复制。在这种情况下，您必须使用defaultValue={activeClient.groupName}。

React Component无法读取父项的道具-返回null

3 个答案: