javascript - 如何使用 React Native 中的 props 将数组从父组件传递到子组件？

Question

我想将“主题”数组从SubjectsScreen到MarkAttendanceScreen并将数组项显示为 FlatList。

父组件

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

标签： javascriptandroidreactjsreact-nativereact-props

Answer 1

将 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)
    );
  },
};