父组件和子组件都在 react-native 中同时渲染

Question

I have a parent component that maps through an array of chapters and renders (an exercise) a child component for every item found and passes an array of exercises to it.

class ExercisesScreen extends Component {
  showSelectedItemList = (screenName, text) => {
    Navigation.push("ExercisesStack", {
      component: {
        name: screenName,
        options: navOptionsCreator(text)
      }
    });
  };

  get chapters() {
    return this.props.chapters.map(chapter => (
      <TouchableOpacity key={chapter.id}>
        <ExercisesList
          onPress={() =>
            this.showSelectedItemList(chapter.screenName, chapter.name)
          }
          exercises={chapter.exercises}
        />
      </TouchableOpacity>
    ));
  }

  render() {
    return <View>{this.chapters}</View>;
  }
}

const mapStateToProps = state => ({
  chapters: chaptersSelector(state)
});

When this child component receives the array of exercises, it maps through it and renders a list of exercises.

class ExercisesList extends Component {
  render() {
    return this.props.exercises.map(exercise => (
      <View key={exercise.id}>
        <TouchableOpacity
          style={styles.button}
          onPress={() =>
            this.props.showSelectedItemList(exercise.screenName, exercise.name)
          }
        >
          <Image source={exercise.icon}/>
          <View>
            <Text>{exercise.name}</Text>
          </View>
          <Image source={arrow} />
        </TouchableOpacity>
        <View />
      </View>
    ));
  }
}

ExercisesList.propTypes = {
  onPress: PropTypes.func,
  exercises: PropTypes.arrayOf(PropTypes.object)
};

The result I get from both components rendered simultaneously:

The question is, what should I do in order for them to render themselves separately and show the corresponding ExercisesList for every chapter in ExercisesScreen?

Answer 1

Make your child component ExercisesList as functional component that only show the corresponding ExercisesList for every chapter not perform any rendering.

Like below:

const ExercisesList = (props) => {
  const { exercises } = props;
  return({ 
        exercises.map(exercise, index) => renderExcercise(exercise, index)
        })
  }
const renderExcercise = (exercise, index) => {
    return(
      <View key={exercise.id}>
        <TouchableOpacity
          style={styles.button}
          onPress={() =>
            this.props.showSelectedItemList(exercise.screenName, exercise.name)
          }
        >
          <Image source={exercise.icon}/>
          <View>
            <Text>{exercise.name}</Text>
          </View>
          <Image source={arrow} />
        </TouchableOpacity>
        <View />
      </View>
    )
  }
export default ExercisesList;

ExercisesList.propTypes = {
  onPress: PropTypes.func,
  exercises: PropTypes.arrayOf(PropTypes.object)
};