传数据从小孩到在母体阵营节目类型错误

Question

我在是新阵营的js

我试图通过从子到父值和同时示出通过地图部件那里示出了在所述发送/触发一个错误功能

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

Answer 1

你没有从.map返回任何东西。

它改成这样：

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

注意，我改变的map匿名函数到arrow function处理的this上下文中词汇的方式。

从您的代码笔链路上运行代码：

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"));

.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;*/ 
 
    }

<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>

Answer 2

你不要有你的地图功能return语句..请添加回报，也将努力