React Native의 어레이 맵 함수에서 동적으로 콘텐츠 렌더링

React Native의 어레이 맵 함수에서 동적으로 콘텐츠 렌더링

배열에서 데이터를 가져와 맵 기능을 사용하여 콘텐츠를 렌더링하려고 합니다.보다

**{this.lapsList()}** 

및 관련지어져 있는

**lapsList()** 

내가 뭘 하려는지 이해할 수 있는 기능이야그 결과 아무것도 표시되지 않습니다(보기 중 보기 등).다음은 간단한 코드입니다.

class StopWatch extends Component {

constructor(props) {
  super(props);

  this.state = {
    laps: []
  };
}

render() {
  return (
    <View style={styles.container}>
        <View style={styles.footer}>
          <View><Text>coucou test</Text></View>
          {this.lapsList()}
        </View>
    </View>
  )
}

lapsList() {

    this.state.laps.map((data) => {
      return (
        <View><Text>{data.time}</Text></View>
      )
    })

}

_handlePressLap() {

  console.log("press lap");

  if (!this.state.isRunning) {

    this.setState({
      laps: []
    })

    return

  }

  let laps = this.state.laps.concat([{'time': this.state.timeElapsed}]);

  this.setState({
      laps: laps
  })

  console.log(laps);

}

}

잊지 말고return매핑된 배열:

lapsList() {

    return this.state.laps.map((data) => {
      return (
        <View><Text>{data.time}</Text></View>
      )
    })

}

의 레퍼런스map()방법: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

를 이동해 보세요.lapsList클래스를 벗어나 렌더링 함수로 기능합니다.

render() {
  const lapsList = this.state.laps.map((data) => {
    return (
      <View><Text>{data.time}</Text></View>
    )
  })

  return (
    <View style={styles.container}>
      <View style={styles.footer}>
        <View><Text>coucou test</Text></View>
        {lapsList}
      </View>
    </View>
  )
}

lapsList() {

    return this.state.laps.map((data) => {
      return (
        <View><Text>{data.time}</Text></View>
      )
    })
}

지도 반납하는 걸 깜빡했네요.이 코드를 사용하면 문제가 해결됩니다.

언급URL : https://stackoverflow.com/questions/37446029/render-content-dynamically-from-an-array-map-function-in-react-native