react-native：無法向組件添加道具

Question

我正在研究簡單的程序。 我有List.js和Detail.js，我想使用Props在Detail.js中獲得List.js狀態，但不起作用（props不返回任何內容）。 我嘗試了這個，但仍然無法正常工作。 這是我到目前為止所做的：

List.js：

import {Detail} from './Detail';
.
.
.
.
GetItem (nama,id) {
  this.setState({id: id});
  return this.props.navigation.navigate('detail');
}
.
.
.
.
render() {
    if (this.state.isLoading) {
      return (
        <View style={{flex: 1, paddingTop: 20}}>
          <ActivityIndicator />
        </View>
      );
    }

    return (

      <View style={styles.MainContainer}>
      <View><TextInput style={{height: 40,width: 300, marginTop:10}}
      onChangeText={this.onKeyChanges.bind(this)}
      />
      </View>
        <View><ListView
          dataSource={this.state.dataSource}
          renderSeparator= {this.ListViewItemSeparator}
          renderRow={(rowData) => <Text style={styles.rowViewContainer}
          onPress={this.GetItem.bind(this, rowData.nama,rowData.id)} >{rowData.nama}</Text>}
        />
        </View>
      <Detail data={this.state.id}/>
      </View>
    );
}

Detail.js

export class Detail extends React.Component
{
  constructor(props)
  {
    super(props);
    this.state = {
      id: props.data
    }
  }

  componentWillUpdate(nextProps, nextState) {
        nextState.id = nextProps.data;
    }

  render() {
    return <Text>{this.state.id}</Text>;
  }
}

<Text>{this.state.id}</Text>; 什么也沒顯示

Answer 1

你需要改變這個

GetItem (nama,id) {
  this.setState({id: id});
  return this.props.navigation.navigate('detail');
}

對此

// setState is asynchronous
GetItem (nama,id) {
  this.setState({id: id}, () => {
    this.props.navigation.navigate('detail');
  });
}

並且您需要在Details組件上獲取新的道具並更新狀態。 對於為什么您不應該直接修改狀態有一個很好的答案

componentWillReceiveProps(nextProps) {
  this.setState({ id: nextProps.data });
}