在React中将数据从子节点传递到父节点会显示类型错误

时间:2017-12-27 19:38:27

标签: javascript reactjs

我是React Js的新手

我正在尝试将值从子节点传递给父节点,而在通过地图显示组件时,会在emit / trigger函数中显示错误

render(){
            var choices =['krass', 'Einfach', 'Dazu', 'Dafur'];
            const listitem = choices.map(function(name, index){
                <Choice onIncreaseCount={this.increaseCount}  key={index} option={name} /> ;
            });

            return (
                    <div className="col-md-12 row">
                        {listitem}
                    </div>
            );
        }

显示以下错误消息

react-dom.development.js:10289 The above error occurred in the <Choices> component:
    in Choices (created by App)
    in div (created by App)
    in div (created by App)
    in App

Consider adding an error boundary to your tree to customize error handling behavior.
 boundaries.
logCapturedError    @   react-dom.development.js:10289
captureError    @   react-dom.development.js:11082
renderRoot  @   react-dom.development.js:10933
performWorkOnRoot   @   react-dom.development.js:11556
performWork @   react-dom.development.js:11509
requestWork @   react-dom.development.js:11420
scheduleWorkImpl    @   react-dom.development.js:11274
scheduleWork    @   react-dom.development.js:11231
scheduleTopLevelUpdate  @   react-dom.development.js:11735
updateContainer @   react-dom.development.js:11773
(anonymous) @   react-dom.development.js:15900
unbatchedUpdates    @   react-dom.development.js:11644
renderSubtreeIntoContainer  @   react-dom.development.js:15899
render  @   react-dom.development.js:15964
(anonymous) @   Inline Babel script:141
n   @   babel.min.js:12
r   @   babel.min.js:12
o   @   babel.min.js:12
u   @   babel.min.js:12
E   @   babel.min.js:1

codepen链接是https://codepen.io/jahid93/pen/VypwjO

2 个答案:

答案 0 :(得分:0)

您没有从.map返回任何内容。

将其更改为:

const listitem = choices.map((name, index) => {
      return(<Choice onIncreaseCount={this.increaseCount} key={index} option={name} />);

注意我将map的匿名函数更改为arrow function,以词法方式处理this的上下文。

从代码笔链接运行代码:

&#13;
&#13;
class Header extends React.Component {
  render() {
    return (
      <div className="col-md-8 col-sm-8 col-xs-8">
        <p className="title-p">
          <span className="red-text">B</span>
          <span className="black-text">ulows</span>{" "}
          <span className="green-text">Wortshatztest</span>
        </p>
      </div>
    );
  }
}

class Hicon extends React.Component {
  render() {
    return (
      <div className="col-md-4 col-sm-4 col-xs-4 icon-image-div">
        <img className="icon-image" src="src/img/WT_icon5.png" alt="icon" />
      </div>
    );
  }
}

class Question extends React.Component {
  render() {
    return (
      <div className="col-md-12 text-center">
        <h3 className="question-type">Welche beiden Worter passen gut zu:</h3>
        <h1 className="question">Gegensatz</h1>
      </div>
    );
  }
}

class Instruction extends React.Component {
  render() {
    return (
      <div className="col-md-12">
        <h4 className="attention-text">
          Wählen Sie Ihre zwei. [attention German Umlaut = auml]
        </h4>
      </div>
    );
  }
}

class Choice extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isToggleOn: true, selectCount: 0 };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
    console.log(this.state.isToggleOn);
    this.props.onIncreaseCount();
  }

  render() {
    let bgColor = this.state.isToggleOn ? "white" : "green";
    return (
      <div className="col-md-6 text-center btn-div">
        <a
          style={{ backgroundColor: bgColor }}
          onClick={this.handleClick}
          type="button"
          className="btn"
          href="#"
        >
          {this.props.option}
        </a>
      </div>
    );
  }
}

class Choices extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      choices: [
        { option: "Krass" },
        { option: "Einfach" },
        { option: "Dazu" },
        { option: "Dafur" }
      ]
    };
    this.increaseCount = this.increaseCount.bind(this);
  }

  increaseCount() {
    this.setState(prevState => ({
      count: prevState.count + 1
    }));
    if (this.state.count == 2) {
      console.log("kam sarse");
    }
  }

  render() {
    var choices = ["krass", "Einfach", "Dazu", "Dafur"];
    const listitem = choices.map((name, index) => {
      return(<Choice onIncreaseCount={this.increaseCount} key={index} option={name} />);
    });

    return (
      <div className="col-md-12 row">
        <Choice onIncreaseCount={this.increaseCount} option="Krass" />
        {listitem}
      </div>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <div className="container">
        <div className="row header">
          <Header />
          <Hicon />
        </div>
        <div className="row question-div">
          <Question />
        </div>
        <div className="row instruction-div">
          <Instruction />
        </div>
        <div className="row choice-div">
          <Choices />
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));
&#13;
.header{
      border-bottom: 5px solid black;
      margin-bottom: 20px;
    }
    .title-p{
      padding-bottom: 0px !important;
      margin-bottom: -10px;
    }
    .red-text{
      font-size: 60px;
      font-weight: bold;
      color: red;
    }
    .black-text{
      font-weight: bold;
      font-size: 25px;
    }
    .green-text{
      font-size: 35px;
      font-weight: 600;
      color: green;
    }
    .icon-image{
      height: 50px;
      float: right;
    }
    .icon-image-div{
      padding-top: 25px;
    }
    .question-div{
      background-color: aliceblue;
      min-height: 20%;
    }
    .instruction-div{
      background-color: goldenrod;
      margin-top: 20px;
    }
    .choice-div{
      margin-top: 30px;
    }
    .zero-padding{
      padding: 0 !important;
      margin: 0 !important;
    }
    .btn-div{
      margin-top: 15px;
      margin-bottom: 15px;
    }
    .btn{
      width: 80%;
      font-weight: bold;
      font-size: 30px;
      color: black;
    }
    .btn:hover{
      background-color: aquamarine;
    }
    .btn:focus{
      box-shadow: 0 0 0 0 !important;
      /*background-color: green;*/
      /*color: white;*/
    }
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

你没有在你的地图函数中得到return语句..请添加return并且它将起作用