React Native 数组道具混淆

Posted 2023-02-22

【中文标题】React Native 数组道具混淆

【英文标题】：React Native array prop confuse

【发布时间】：2019-01-01 04:28:37

【问题描述】：

我有两个组件，一个父组件 (ManySpace) 和一个子组件 (OtherComponent)。 OtherComponent 为 manyspace 属性呈现两个具有两个不同数组的 ManySpace 组件。

MANYSPACE1 和 MANYSPACE2 渲染是完美的，但是混淆了第一个 ManySpace 和第二个 ManySpace 组件数组的内容我如何解决这个问题谢谢。 希望我能解释我的问题

import React,  Component  from 'react'; //and other imports
  let MANYSPACE;
  let icerik;
  let firsttext;
  let firstinput;
  let answer1;
  let answerlength1;
  let secondtext;
  let secondinput;
class ManySpace extends Component 
  render() 
    MANYSPACE = this.props.manyspace;
    icerik = MANYSPACE[0].icerik;
    firsttext = MANYSPACE[0].firsttext;
    firstinput = MANYSPACE[0].firstinput;
    if (firstinput) 
      answer1 = MANYSPACE[0].firstinput.answer1;
      answerlength1 = answer1.length;
    

    secondtext = MANYSPACE[0].secondtext;
    secondinput = MANYSPACE[0].secondinput;
    if (secondinput) 
      answer2 = MANYSPACE[0].secondinput.answer2;
      answerlength2 = answer2.length;
    
  return (

  ) 

--我的其他组件

import React,  Component  from 'react'; //and other imports
  const MANYSPACE1 = [
    
      icerik: 'lorem ipsum',
      firsttext: 'lorem ipsum',
      firstinput: 
        answer1: 'lorem ipsum'
      ,
      secondtext: 'lorem ipsum'
    
  ];
  const MANYSPACE2 = [
    
      icerik:'lorem ipsum',
      firsttext: 'lorem ipsum',
      firstinput: 
        answer1: 'lorem ipsum'
      ,
      secondtext: 'lorem ipsum',
      secondinput: 
        answer2: 'lorem ipsum'
      ,
      thirdinput: 
        answer3: 'lorem ipsum'
      
    
  ];  
class OtherComponent extends Component 
    <ManySpace
      manyspace=MANYSPACE1
    />
    <ManySpace
     manyspace=MANYSPACE2
    />

【参考方案1】：

在 render 方法内创建变量，而不是为所有 ManySpace 实例共享一个变量。

示例

import React,  Component  from "react"; //and other imports

class ManySpace extends Component 
  render() 
    const MANYSPACE = this.props.manyspace;
    const  icerik, firsttext, firstinput  = MANYSPACE[0];
    let answer1, answerlength1;

    if (firstinput) 
      answer1 = MANYSPACE[0].firstinput.answer1;
      answerlength1 = answer1.length;
    

    const  secondtext, secondinput  = MANYSPACE[0];
    let answer2, answerlength2;

    if (secondinput) 
      answer2 = MANYSPACE[0].secondinput.answer2;
      answerlength2 = answer2.length;
    

    return (
      /* ... */
    );
  

【讨论】：

感谢您的回复，但我的错误是我使用渲染范围之外的变量我尝试和 secondinput 不可用警告，我在渲染函数之外就像这样我如何做到 onSubmitEditing1 = () => if (secondinput ) this.secondref.focus(); else if (thirdinput) this.thirdref.focus(); else Keyboard.dismiss(); ;

@Radex26 问题一经回答，请勿更新。如果您认为该问题已得到解答，请接受该问题的答案并创建一个全新的问题。

好吧，对不起，对不起，我忘了这块，但是我如何解决这个问题，如果你能解决我很满意