时间戳

首页 > 解决方案 > JSX 中的循环和渲染

javascript - JSX 中的循环和渲染

问题描述

我需要遍历一个类似数组的对象，并根据它的长度在 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 />组件就可以了逻辑

标签： javascriptreactjsreact-nativeloopsjsx

解决方案

你需要使用FlatList哪个是最常用的组件来显示List在 React 中，它就像一个Foreach.

在参数数据中传递您的数据。并在你的renderItem地方你的组件。在您的组件中，访问foreachwith的值{item.Something}，在此示例中，数据为： 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}
            />
        )
    }} 
/>

推荐阅读