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} 
    /> 
)