React從狀態的多個陣列傳遞道具

Question

我試圖從包含在反應組件的狀態中的兩個數組傳遞道具。一個數組是由用戶生成的，另一個是已經內置的。這是我的頭，因爲我還是對React還不熟悉，並且不確定如何正確傳遞道具。

組件中沒有錯誤，只是我不知道該怎麼做。

下面我會什麼，我正在尋找，任何幫助將不勝感謝解釋

主要成分

在this.state下面你將看到questions（這完美的作品），然後hints。問題被正確映射，但是當我嘗試添加提示來映射它時，它會立即返回所有提示，而不是按順序和逐一返回。我剛剛嘗試加入(questions, hints)，但它沒有正確返回。

export default class AutoFocusText extends Component { 
    constructor() { 
    super(); 

    this.state = { 
     active: 0, 
     questions: [ 
     '1. Enter A Proper Noun', 
     '2. Enter A Location', 
     '3. Enter A Proper Noun that Describes Evil', 
     '4. Describe Something Menacing', 
     '5. Describe a fortified area', 
     "6. A Woman's Name", 
     '7. Describe a large area of mass' 
     ], 
     hints: [ 
     "Hint: Use words like Rebel, Hell's Angels", 
     'Hint: Use a word such as Base, Bunker, Foxhole, Bedroom', 
     'Hint: Use words like Empire, Ottoman, Mongols', 
     'Hint: Freeze Ray, Leftover Fruitcake', 
     'Hint: Castle, Bunker, Planet', 
     'Hint: Astrid, Diana, Mononoke, Peach', 
     'Hint: Use words such as Galaxy, Planet, Wal Mart' 
     ], 
     answers: [] 
    }; 

我想借此回答了用戶的輸入，並把它傳承下去的道具成如properName1={this.state.value1}等其他成分，我知道這是映射答案的數組，我只是不能確定如何去做這個。

以下是主要組件的其餘部分。

this.submitHandler = this.submitHandler.bind(this); 
    this.renderQuestion = this.renderQuestion.bind(this); 
    this.onChange = this.onChange.bind(this); 
    } 

    renderQuestion() { 
    const { questions, hints, active, value } = this.state; 

    if (active >= questions.length) 
     return <Crawler style={{ width: '500px', position: 'absolute' }} />; 

    return questions.filter((quest, index) => index === active).map(quest => (// get next question // map over selected question, the key prop allows react to 
     <FormElement 
     key={active} 
     text={quest} 
     hint={hints} 
     value={value} 
     onChange={this.onChange} 
     /> 
    )); 
    } 

    onChange(e) { 
    this.setState({ value: e.target.value }); 
    } 

    submitHandler(e) { 
    e.preventDefault(); 

    const answers = [...this.state.answers, this.state.value]; //push new value to answsers array without mutation 
    const value = ''; // clear input 
    const active = this.state.active + 1; // index pointer 

    this.setState({ answers, value, active }); 
    } 

    render() { 
    return (
     <MainContainer> 

     <DivStyle> 
      {/* Form Wrapper */} 
      <form onSubmit={this.submitHandler}> 
      {this.renderQuestion()} 
      <SubmitButton type="submit">Submit</SubmitButton> 
      </form> 
      <ul> 
      {this.state.answers.map((ans, index) => { 
       return (
       <li key={index}> 
        {ans} 
       </li> 
      ); 
      })} 
      </ul> 
     </DivStyle> 
     </MainContainer> 
    ); 
    } 
} 

輔元件1 這是愚蠢的部件，其中該問題（和我想要的提示以及）產生

class FormElement extends Component { 
    constructor() { 
    super(); 
    } 

    componentDidMount() { 
    //focus text input upon mounting component 
    this.textInput.focus(); 
    } 

    render() { 
    const { text, hint, value, onChange } = this.props; 

    return (
     <div> 
     <InputQuestion> 
      {text} 
      {hint} 
     </InputQuestion> 
     <input 
      className="inputstyling" 
      ref={el => { 
      this.textInput = el; 
      }} 
      onChange={onChange} 
      type="text" 
      value={value} 
     /> 
     </div> 
    ); 
    } 
} 

export default FormElement; 

目前，「提示」中的所有帶來的立即提示，而不是一次一個，並按順序。

輔元件2

最後通過必要的道具去這裏。該陣列通過陣列

class Crawler extends Component { 
    constructor() { 
    super(); 
    this.state = { 
     properName1: 'Rebel', 
     noun1: 'frog', 
     properName2: 'Empire', 
     properName3: 'DEATH STAR', 
     noun2: 'station', 
     noun3: 'planet', 
     personsName1: 'Leia', 
     noun4: 'starship', 
     pluralnoun1: 'people', 
     noun5: 'galaxy' 
    }; 
    } 
    render() { 
    return (
     <ContainLeft style={{ padding: 0 }}> 

     <CrawlHolder> 
      <div class="fade" /> 
      <section className="star-wars"> 

      <div className="crawl"> 

       <div className="title"> 
       <p>Episode IV</p> 
       <h1>A New Hope</h1> 
       </div> 

       <p> 
       It is a period of civil war. 
       {' '} 
       {this.props.properName1} 
       {' '} 
       spaceships, striking from a hidden 
       {' '} 
       {this.props.noun1} 
       , have won their first victory against the evil Galactic 
       {' '} 
       {this.props.properName2} 
       . 
       </p> 
       <p> 
       During the battle, 
       {' '} 
       {this.props.properName1} 
       {' '} 
       spies managed to steal secret plans to the 
       {' '} 
       {this.props.properName2} 
       's ultimate weapon, the 
       {' '} 
       {this.props.properName3} 
       , an armored 
       {' '} 
       {this.props.noun2} 
       {' '} 
       with enough power to destroy an entire planet. 
       </p> 
       <p> 
       Pursued by the Empire’s sinister agents, Princess 
       {' '} 
       {this.props.personsName1} 
       {' '} 
       races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the 
       {' '} 
       {this.props.noun3} 
       … 
       </p> 

      </div> 

      </section> 
     </CrawlHolder> 
     </ContainLeft> 
    ); 
    } 
} 
export default Crawler; 

謝謝您的幫助，我扔，因爲我從來沒有過的道具

Answer 1

在map函數有一個可選的第二PARAM，當前元素的索引，所以你能這樣做：

return questions.filter((quest, index) => index === active).map((quest,i) => (
     <FormElement 
     key={active} 
     text={quest} 
     hint={hints[i]} 
     value={value} 
     onChange={this.onChange} 
     /> 
    )); 

編輯：

現在我看到你在這麼map不需要我覺得一個實時渲染只有一個問題;因爲你有當前問題的索引（active）我想你可以只是

return (
    <FormElement 
     text={questions[active]} 
     hint={hints[active]} 
     value={value} 
     onChange={this.onChange} 
    /> 
)