2017-12-27 350 views
1

我在是新陣營的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

回答

0

你沒有從.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>

+0

錯誤是說這個。 increaseCount未捕獲類型錯誤 我認爲它不涉及返回 看看codepen –

+0

@ Md.JahidulIslam我已經添加了一個運行的示例與您的代碼的答案。請注意,我使用箭頭函數來處理'this'的上下文 –

0

你不要有你的地圖功能return語句..請添加回報,也將努力