JSX 中的循環和渲染

Question

我需要循環遍歷一個類似數組的對象並根據它的長度在 React Native 中渲染組件，其中的代碼如下：

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

我只想循環遍歷data變量和渲染組件我只想要邏輯所以渲染<Text />組件是好的只是邏輯

Answer 1

你需要使用FlatList ，它是 React 中最常用的顯示List組件，它就像一個Foreach 。

在參數數據中傳遞您的數據。 並在您的renderItem放置您的組件。 在您的組件中，使用{item.Something}訪問foreach的值，在此示例中，數據為： 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}
            />
        )
    }} 
/>