Как передать массив из родительского компонента в дочерний компонент, используя реквизиты в React Native?

Question

Я хочу передать массив «субъектов» от SubjectsScreen до MarkAttendanceScreen и отобразить элементы массива как FlatList.

Parent Component

export default class SubjectsScreen extends Component {
    state = {
      subjects: ["A", "B"]
    };

    render() {
      return (
          ...
          <MarkAttendanceScreen subjectsArray={this.state.subjects} />
      );
    }
}

Дочерний компонент

export default class MarkAttendanceScreen extends Component {

    constructor(props) {
      super(props);
      this.state = {
        subjects: []
      };
    }

    componentDidMount() {
      this.setState({ subjects: this.props.subjectsArray });
    }

    render() {
      return (   
        <FlatList>
            { this.props.subjects.map((item, key)=>(
                <Text key={key}> { item } </Text>)
            )}
        </FlatList>
      );
    }
}

Answer 1

Использование props давало ошибку при использовании FlatList с картой. Прекрасно работает при извлечении значения непосредственно из AsyncStorage.

export default class MarkAttendanceScreen extends Component {

  state = {
    subjects: [],
    text: ""
  }

  componentDidMount() {
    Subjects.all(subjects => this.setState({ subjects: subjects || [] }));
  }

  render() {
    return (
      <View>
        <FlatList
          data={ this.state.subjects}
          renderItem={({item}) => {
            return (
              <View>
                  <Text> { item.text } </Text>
              </View>
            )
          }}
          keyExtractor={ (item, index) => index.toString()}
        />
      </View>
    );
  }
}

let Subjects = {
  convertToArrayOfObject(subjects, callback) {
    return callback(
    subjects ? subjects.split("\n").map((subject, i) => ({ key: i, text: subject })) : []
    );
  },
  convertToStringWithSeparators(subjects) {
    return subjects.map(subject => subject.text).join("\n");
  },
  all(callback) {
    return AsyncStorage.getItem("SUBJECTS", (err, subjects) =>
    this.convertToArrayOfObject(subjects, callback)
    );
  },
};

Answer 2

this.props.subjects не существует, но вы установили состояние в componentDidMount. В FlatList используйте this.state.subject.map.

render() {
  return (   
    <FlatList>
        { this.state.subjects.map((item, key)=>(
             // ^here
            <Text key={key}> { item } </Text>)
        )}
    </FlatList>
  );
}

Answer 3

D. Смит прав, вам нужно изменить эту строку на this.state.subjects.map, но также можно просто удалить переменную состояния из дочернего компонента и использовать массив непосредственно из props.

export default class MarkAttendanceScreen extends Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (   
      <FlatList>
          { this.props.subjectsArray.map((item, key)=>(
              <Text key={key}> { item } </Text>)
          )}
      </FlatList>
    );
  }
}

Обновление:

Плоские списки должны быть определены следующим образом:

<FlatList
    data={ this.props.subjectsArray }
    renderItem={({item}) => {
        return (
             <Text> { item } </Text>)
        )
    }}  
   keyExtractor={(item, index) => index}
/>

или вы можете использовать его так, как у вас есть, и удалить плоский список, например:

return this.props.subjectsArray.map((item, key)=>(
        <Text key={key}> { item } </Text>)
       )}

Answer 4

Вы должны использовать то же имя ключа, которое вы использовали при передаче данных дочернему компоненту, например, в вашем случае вы использовали здесь ключ subjectsArray, и вам не нужно сначала сохранять его в состоянии, а затем использовать, если вы не хотите обновите его позже.

<MarkAttendanceScreen subjectsArray={this.state.subjects} />

Таким образом, в вашем дочернем компоненте это будет

<FlatList>
   {this.props.subjectsArray.map((item, key)=>(
       <Text key={key}> { item } </Text>
   ))}
</FlatList>