Question

我将对象传递给子组件，每次进入页面时，它都会重新渲染。

我试图用componentWillUnmount方法中的一个空数组覆盖我的数组，但是它不起作用。

let array = new Array<myType>
export default class Parent extends Component{

   componentDidMount():void {
      array.name = 'John'
      array.lastName = 'Smith'
   }

   render(){
     return(
        <View>
           <ChildComponent data={array}/>
        </View>
     )
   }  
}

_______________________Child

interface myProps{
   data: Array<myType>
}

export default class ChildComponent extends Component<myProps>{
   state={
     childData = this.props.data
   }   

   componentWillUnmount(): any {
        this.unMountState();
    }

    unMountState = () => {
        this.setState({childData: new Array<myType>()})
    };

   render(){
     return(
        <View>
           {this.state.childData.map((item, key) => (
                    <Text>{item.name} {item.lastName}</Text>

                ))}
        </View>
     )
   }  
}

每次我在父页面中来回移动时，它都会重新渲染数组！所以我有这样的输出：约翰·史密斯约翰·史密斯约翰·史密斯。。

Answer 1

我认为您应该使用对象而不是Array，这样，您的代码将像这样，并且您不再需要componentWillUnmount。

let dataObj = {};

export default class Parent extends Component {
  componentDidMount(): void {
    dataObj.name = 'John';
    dataObj.lastName = 'Smith';
  }

  render() {
    return (
      <View>
        <ChildComponent data={dataObj} />
      </View>
    );
  }
}

//------------------- Child Component

export default class ChildComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      childData: this.props.data,
    };
  }

  render() {
    const { childData } = this.state;
    return (
      <View>
        <Text>
          {childData.name} {childData.lastName}
        </Text>
      </View>
    );
  }
}

Answer 2

首先，如果要在react-native中显示项目列表，请始终使用Flatlist，这会给地图带来很多内置的好处。

按如下所示用“平面列表”替换地图，

<FlatList
   data={this.props.data}
   extraData={this.state}
   keyExtractor={this._keyExtractor}
   renderItem={this._renderItem}
 />

 _keyExtractor = (item, index) => item.id

_renderItem = ({item}) => (
    <Text>{item.name}</Text>
  );

keyExtractor非常重要，它将唯一地标识每个元素。

使用Flatlist，您的问题将得到解决。

每当我进入页面时，React-native都会渲染我的对象

2 个答案: