reactjs - 如何使用 Props 初始化组件状态并对此状态进行一些更改？

Question

• 我有一个屏幕，它有一个tags用道具初始化的状态属性——道具是一个对象数组。

• 设置后，我使用this.state.tags在 FlatList 中呈现对象项，然后通过移动它们并使用panResponder交换它们来与之交互。

  • 我的问题是在初始渲染显示的项目时，但我无法移动它们，但是当我更改代码以强制重新渲染时 - 然后我可以移动项目 - 我可能做错了什么。

class MyTags extends PureComponent<Props, State> {   

  props: Props;

  state: State = {
    tags: this.props.tags,
  };

  panResponder: PanResponder;

  componentWillMount = async () => {
    this.panResponder = this.createPanResponder();

    await this.setState({tags: this.props.squadTemplate})
  }


  render() {
      const {tags} = this.state

      let myCards = [];
      for (let i = 1; i < 5; i++) {
      myCards.push({
        id: i,
        card: (
          <CardHolder
            tag={this.state.tags[i-1]}
          />
        ),
      });
    }

      const slice1 = myCards.filter(card => card.card.props?.tag.new === true );



    return (
        <View style={styles.container}>
        <FlatList
          data={slice1}
          renderItem={({item}) => (
            <TouchableHighlight
              style={{ marginHorizontal: 10, alignSelf: "center" }}
              >
              {item.card}
            </TouchableHighlight>
          )}
          keyExtractor={item => item.id.toString()}
        />
</View>
)

标签： reactjsreact-native