Javascript 从平面列表项导航到另一个屏幕

当我点击平面列表上的一个项目时，我正试图导航到另一个屏幕

我在这里工作了几天的代码，但现在没有，当应用程序加载时，EventDetailScreen会立即打开，甚至在我单击任何平面列表项之前，然后当我从EventDetailScreen按back按钮返回EventListScreen时，如果我点击任何列表项，什么都不会发生，我也不会被带到EventDetail屏幕

我还得到一个错误：

警告：无法在现有状态转换期间更新（例如在

render

或其他组件的构造函数中）。渲染方法应该是道具和状态的纯函数；构造函数的副作用是一种反模式，但可以移动到

componentWillMount

我是新来的反应，所以任何帮助将不胜感激

我正在使用：

“反应导航”：“^2.7.0”，

“反应”：“16.4.1”，
“react native”：“0.56.0”，

我用这个答案来让它开始工作

EventListScreen.js

export default class EventListScreen extends Component {

constructor() {
    super();
    this.ref = firebase.firestore();
    this.unsubsribe = null;

    this.state = {
        eventName: '',
        eventLocation: '',
        loading: true,
        events: [],
    };
}

componentDidMount() {
    console.log('EventsListScreen1');
    this.unsubsribe = this.ref.onSnapshot(this.onCollectionUpdate)
}

componentWillUnmount() {
    this.unsubsribe();
}


openDetails = () => {
    this.props.navigation.navigate('EventDetailScreen');
};

render() {

    if (this.state.loading) {
        return null;
    }

    return (
        <Container>

            <FlatList
                data={this.state.events}
                // Get the item data by referencing as a new function to it
                renderItem={({item}) =>
                    <Event
                    openDetails={() => this.openDetails()}
                    {...item} />}
            />

            <View style={{flex: 1}}>
                <Fab
                    active={this.state.active}
                    direction="left"
                    containerStyle={{}}
                    style={{backgroundColor: '#5067FF'}}
                    position="bottomRight"
                    onPress={() => 
                    this.props.navigation.navigate('EventForm')
                    }>
                    <Icon 
                       name="ios-add"/>
                </Fab>
            </View>

        </Container>
    );
}

export default class Event extends Component {

render() {

    return (
        <Card>
            <CardSection>
                <Text>{this.props.eventName}</Text>
            </CardSection>

            <TouchableOpacity
              onPress={this.props.openDetails()}
            >
            <CardSection>
                <Image
                    style={{
                       width: 350,
                       height: 300
                    }}
                    source={{
                       uri: this.props.imageDownloadUrl
                    }}
                />
            </CardSection>

            <CardSection>
                <Text>{this.props.eventLocation}</Text>
            </CardSection>
            </TouchableOpacity>
        </Card>
    );
}};

export default class EventDetailScreen extends Component {
render() {
    /* 2. Get the param, provide a fallback value if not available */
    const { navigation } = this.props;
    const itemId = navigation.getParam('itemId', 'NO-ID');

    return (
        <View 
           style={{ 
              flex: 1,
              alignItems: 'center',
              justifyContent: 'center' 
            }}>
            <Text>Details Screen</Text>
        </View>
    );
}}

导出默认类EventListScreen扩展组件{
构造函数（）{
超级（）；
this.ref=firebase.firestore（）；
this.unsubscribe=null；
此.state={
事件名称：“”，
事件位置：“”，
加载：对，
事件：[]，
};
}
componentDidMount（）{
console.log（'EventsListScreen1'）；
this.unsubscribe=this.ref.onSnapshot（this.onCollectionUpdate）
}
组件将卸载（）{
这个。取消订阅（）；
}
openDetails=（）=>{
this.props.navigation.navigate（'EventDetailScreen'）；
};
render（）{
if（this.state.loading）{
返回null；
}
返回(
this.openDetails（）}
{…项}/>}
/>
this.props.navigation.navigate（'EventForm'）
}>
);
}

Event.js

export default class EventListScreen extends Component {

constructor() {
    super();
    this.ref = firebase.firestore();
    this.unsubsribe = null;

    this.state = {
        eventName: '',
        eventLocation: '',
        loading: true,
        events: [],
    };
}

componentDidMount() {
    console.log('EventsListScreen1');
    this.unsubsribe = this.ref.onSnapshot(this.onCollectionUpdate)
}

componentWillUnmount() {
    this.unsubsribe();
}


openDetails = () => {
    this.props.navigation.navigate('EventDetailScreen');
};

render() {

    if (this.state.loading) {
        return null;
    }

    return (
        <Container>

            <FlatList
                data={this.state.events}
                // Get the item data by referencing as a new function to it
                renderItem={({item}) =>
                    <Event
                    openDetails={() => this.openDetails()}
                    {...item} />}
            />

            <View style={{flex: 1}}>
                <Fab
                    active={this.state.active}
                    direction="left"
                    containerStyle={{}}
                    style={{backgroundColor: '#5067FF'}}
                    position="bottomRight"
                    onPress={() => 
                    this.props.navigation.navigate('EventForm')
                    }>
                    <Icon 
                       name="ios-add"/>
                </Fab>
            </View>

        </Container>
    );
}

export default class Event extends Component {

render() {

    return (
        <Card>
            <CardSection>
                <Text>{this.props.eventName}</Text>
            </CardSection>

            <TouchableOpacity
              onPress={this.props.openDetails()}
            >
            <CardSection>
                <Image
                    style={{
                       width: 350,
                       height: 300
                    }}
                    source={{
                       uri: this.props.imageDownloadUrl
                    }}
                />
            </CardSection>

            <CardSection>
                <Text>{this.props.eventLocation}</Text>
            </CardSection>
            </TouchableOpacity>
        </Card>
    );
}};

export default class EventDetailScreen extends Component {
render() {
    /* 2. Get the param, provide a fallback value if not available */
    const { navigation } = this.props;
    const itemId = navigation.getParam('itemId', 'NO-ID');

    return (
        <View 
           style={{ 
              flex: 1,
              alignItems: 'center',
              justifyContent: 'center' 
            }}>
            <Text>Details Screen</Text>
        </View>
    );
}}

导出默认类事件扩展组件{
render（）{
返回(
{this.props.eventName}
{this.props.eventLocation}
);
}};

EventDetailScreen.js

export default class EventListScreen extends Component {

constructor() {
    super();
    this.ref = firebase.firestore();
    this.unsubsribe = null;

    this.state = {
        eventName: '',
        eventLocation: '',
        loading: true,
        events: [],
    };
}

componentDidMount() {
    console.log('EventsListScreen1');
    this.unsubsribe = this.ref.onSnapshot(this.onCollectionUpdate)
}

componentWillUnmount() {
    this.unsubsribe();
}


openDetails = () => {
    this.props.navigation.navigate('EventDetailScreen');
};

render() {

    if (this.state.loading) {
        return null;
    }

    return (
        <Container>

            <FlatList
                data={this.state.events}
                // Get the item data by referencing as a new function to it
                renderItem={({item}) =>
                    <Event
                    openDetails={() => this.openDetails()}
                    {...item} />}
            />

            <View style={{flex: 1}}>
                <Fab
                    active={this.state.active}
                    direction="left"
                    containerStyle={{}}
                    style={{backgroundColor: '#5067FF'}}
                    position="bottomRight"
                    onPress={() => 
                    this.props.navigation.navigate('EventForm')
                    }>
                    <Icon 
                       name="ios-add"/>
                </Fab>
            </View>

        </Container>
    );
}

export default class Event extends Component {

render() {

    return (
        <Card>
            <CardSection>
                <Text>{this.props.eventName}</Text>
            </CardSection>

            <TouchableOpacity
              onPress={this.props.openDetails()}
            >
            <CardSection>
                <Image
                    style={{
                       width: 350,
                       height: 300
                    }}
                    source={{
                       uri: this.props.imageDownloadUrl
                    }}
                />
            </CardSection>

            <CardSection>
                <Text>{this.props.eventLocation}</Text>
            </CardSection>
            </TouchableOpacity>
        </Card>
    );
}};

export default class EventDetailScreen extends Component {
render() {
    /* 2. Get the param, provide a fallback value if not available */
    const { navigation } = this.props;
    const itemId = navigation.getParam('itemId', 'NO-ID');

    return (
        <View 
           style={{ 
              flex: 1,
              alignItems: 'center',
              justifyContent: 'center' 
            }}>
            <Text>Details Screen</Text>
        </View>
    );
}}

导出默认类EventDetailScreen扩展组件{
render（）{
/*2.获取参数，如果不可用，则提供回退值*/
const{navigation}=this.props；
const itemId=navigation.getParam（'itemId'，'NO-ID'）；
返回(
详细信息屏幕
);
}}

这可能是由于

事件中的以下行造成的

<TouchableOpacity
    onPress={this.props.openDetails()} // <-- this line to be specific
 > ... </>

为了验证上述声明的重要性，
试一试

这可能是由于
事件中的以下行造成的

<TouchableOpacity
    onPress={this.props.openDetails()} // <-- this line to be specific
 > ... </>

为了验证上述声明的重要性，
试一试

非常感谢，您能给我解释一下为什么将上述两个方法添加到构造函数或componentDidMount是个好主意吗？谢谢，有什么可以推荐的教程吗you@Priyesh试图解释的是，您应该将函数绑定到“this”。我不确定你是否真的需要绑定它，因为你使用的是自动将你的作用域绑定到this@AndrewIrwin你可以阅读这个问题来了解更多细节。非常感谢，您能给我解释一下为什么将上述两个方法添加到构造函数或componentDidMount是个好主意吗？谢谢，有什么可以推荐的教程吗you@Priyesh试图解释的是，您应该将函数绑定到“this”。我不确定你是否真的需要绑定它，因为你使用的是自动将你的作用域绑定到this@AndrewIrwin你可以阅读这个问题来了解更多细节。