JSX 中的循环和渲染

Question

I Need To Loop Through An Array-Like Object And Render Components In React Native According To It's Length And The And In It Here Is The Code:

  const Screen = function({navigation, route}) {
  var data = [];
  var cases = [];
  axios.get(`${uri}cases`)
  .then(json => {
    console.log(json)
    data = json.data
  }).catch(err => {
    console.log(err)
  });

  function showCases(cases){
    cases.forEach(one => {
      cases.push(<Text>one._id</Text>)
    })
  }
showCases(data)
var comp = [<Text>Hello</Text>, <Text>Hello</Text>]
  return(
 <View>
  <View>
  <Button title='Click' onPress={() => {
    cases.push(<Text>Hello</Text>)
    console.log(cases)
    console.log(comp)
    console.log(comp == cases)
    }} />
    <Button
          title="Modern Clinic"
          disabled={true}
        />
        <Button title="Profit" onPress={() => {
          navigation.push('Profit')
        }} />
        <Button title="Expenses" onPress={() => {
          navigation.push('Expenses')
        }}/>
        <Button title="New" onPress={() => {
          navigation.push('New...')
        }}/>
      </View>
    <SafeAreaView>
  <ScrollView>
  <Text>{cases}</Text>
  </ScrollView>
  </SafeAreaView>
</View>
  )
}

I just want to Loop Through The data variable And Render Components I just want the logic so rendering a <Text /> component is okay just The Logic

Answer 1

You need to use FlatList which is the most used Component to display List in React, It's like a Foreach .

Pass your data in the argument data. And in your renderItem place your component. In your component, access the value of foreach with {item.Something} , in this example data are : this.state.listParam = {.{"des":"Name","value":"John","mandatory":true, ...} }

<FlatList
    style={{ marginBottom: 40 }}
    data={this.state.listParam}
    keyExtractor={(item,i) => i.toString()}
    renderItem={({item,index}) => {
        return(
            <HiddenMandatoryInput
                style={ style.textinput }
                placeholder={item.des}
                value={item.value}
                mandatory={item.mandatory}
                visible={item.visible}
                onChangeText={(text) => this._changeText(text, item.name)}
                type={item.type}
            />
        )
    }} 
/>