Question

我在主屏幕上有一个按钮，用于切换AlertBar中的文本。

因此，当我按下按钮时，AlertBar中的文字应根据状态isParked进行更改。目前，当我按下按钮时，没有任何反应......我不确定为什么。

这是我的主屏幕：

class Home extends Component {

    constructor(props) {
      super(props);
      this.state = {
          isParked: false
      };    
  }


    pressPark = () => this.setState({isParked:true})

    render() {
        console.ignoredYellowBox = ['Remote debugger'];

        return (

            <View>
                    <View>
                        <AlertBar isParked={this.state.isParked}/>
                    </View>

                    <View style={styles.parkButton}>
                        <Button title='PARK' onPress={this.pressPark} color='green'/>
                    </View>
            </View>

            );
        }
    }

这是我的AlertBar.js：

class AlertBar extends Component {

        state = {
            region: 'Singapore',
            isParked: this.props.isParked,
            alertText: null
    }


...   some unrelated code ...

    componentDidMount() {

        if (this.state.isParked === false) {
                this.setState({alertText: "You're parking at"})} else if (this.state.isParked === true) {
                this.setState({alertText: "You're parked at"})}

        alert(this.state.alertText)
            }

    componentWillUnmount() {
        // some unrelated code
    }

    render() {

... some unrelated code...

        return(

                <View style={styles.container}>
                    <Text style={styles.welcomeText}>
                        {this.state.alertText}
                    </Text>
                    <Text style={styles.locationText}>
                        {this.state.region}
                    </Text>
                </View>
            )
    }
}

我这样做错了吗？我不知道出了什么问题......请帮忙！谢谢！

Answer 1

使用

if (this.props.isParked === false)

而不是

if (this.state.isParked === false)

（并且不要直接将道具转移到州，这无论如何都没有意义:)）

Answer 2

此时，您的AlertBar组件未处理任何道具更改。

您需要做的是，只要收到更新，就会将道具映射到状态。

在AlertBar.js中添加这行代码，只要收到更新，它就会将isParked映射到状态。

componentWillReceiveProps(props) {
    this.setState({ isParked: props.isParked });
}

在React Native中将道具传递到状态？

2 个答案: