TypeError：this.props.obj未定义

debugcn 发表于 Dev

阿什什饶

我试图将对象从子对象传递到父组件，这是它的代码：

标头类

class Header extends React.Component{
    render()
    {
      return(
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            {this.props.text}
            {this.props.num}
            Hello
            </a>
            <div>
            {this.props.myObj.a}
            </div>

            {JSON.stringify(this.props.myObj)}

        </header>
      )
    }
}

使用上述Header组件的App类

class App extends React.Component {
  render(){
  return (
    <div className="App">
    // <Header text="Dynamix "/>
    <Header num={10} myObj={{
      a: 1 ,
      b: 2
    }}/>
    <Body/>
    <Body2/>
    </div>
  );
}
}

错误：

TypeError: this.props.myObj is undefined
 <div> 
^ 37 | {this.props.myObj.a}
  38 | </div>
  39 |

唯一的问题是该行：{this.props.myObj.a}。我发送的任何其他变量都没有问题。我是React和javascript的新手，所以请在这里帮助我。

山姆

您的评论部分不正确。（您不能这样评论）。如果是故意的，则需要传递对象。这是更新的代码。您可以检查工作链接https://codesandbox.io/s/dazzling-waterfall-eo8j8?file=/src/App.js:0-321

import React from "react";
    import "./styles.css";
    import { Header } from "./Header";
    export class App extends React.Component {
      render() {
        return (
          <div className="App">
            <Header
              num={10}
              myObj={{
                a: 1,
                b: 2
              }}
            />
          </div>
        );
      }
    }

----标头组件已更新。

import React from "react";
export class Header extends React.Component {
  render() {
    return (
      <header className="App-header">
        <img src={this.props.logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          {this.props.text}
          {this.props.num}
          Hello
        </a>
        <div>{this.props?.myObj?.a}</div>

        {JSON.stringify(this.props.myObj)}
      </header>
    );
  }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。