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

Question

我想将 "subjects" 数组从 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>
      );
    }
}

Answer 1

您必须使用与将数据传递给子组件时使用的相同的键名，例如在你的情况下，你在这里使用了密钥 subjectsArray 并且你不需要先将它存储在状态中然后使用，除非你想稍后更新它。

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

因此在您的子组件中，它将是

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

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. Smith 是正确的，您需要将该行更改为 this.state.subjects.map 但也可以只从子组件中删除状态变量并直接使用道具中的数组。

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

在将 FlatList 与地图一起使用时，使用 props 会出错。直接从 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)
    );
  },
};

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

How to pass an array from a parent component to child component using props in React Native?

javascript

android

reactjs

react-native

react-props

更新：