Question

如果API返回false，我正在尝试显示警报消息。我可以这样做，但是由于某种原因，在用户界面中我收到的警报显示为2倍。同样在下拉更改方法中，应该调用该API并返回可能返回的值为true（如果返回true，则应该隐藏Alert）。

在子组件中调用Alert，在父组件中调用子：

//Parent

import React from 'react'
import Header from '../Header';

const Parent = ()  => {
.....
render(
    <Header />
  );
 }
 export default Parent;

 // Child

 import React from 'react'
 import Alert from '@alert-react'
 import Dropdown from '@dropdown-react'

export default class Header extends React.Component {
constructor(props) {
    super(props);

    this.state = {
        defaultMessage: []
    };
this.getData = this.getData.bind(this);
this.onDropdownChange = this.onDropdownChange.bind(this)
}

componentDidMount() {
    this.getData();
}

getData = () => {
    fetch("api")
    .then(response => {
        let test = !response.defaultApiMessage;
        this.setState({
            defaultMessage: test
        })
    })
}
   onDropdownChange = (selectVal) => {
        this.getData();
    }

render() {
    return(
        <Dropdown 
        onChange={onDropdownChange()}
        />
        <div>
        { 
        this.state.defaultMessage && (
        <Alert message="test" />
        )
        }
        </div>
    )
}

}

结果：警报被两次调用，在“标题”部分中被调用一次，在“主要”部分中被调用

Answer 1

将onDropdownChange函数移出render函数。像这样更新您的代码：

//Parent

import React from 'react'
import Header from '../Header';

const Parent = ()  => {
.....
render(
    <Header />
  );
 }
 export default Parent;

 // Child

 import React from 'react'
 import Alert from '@alert-react'
 import Dropdown from '@dropdown-react'

    export default class Header extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            defaultMessage: []
        }
        this.getData = this.getData.bind(this) 
        this.onDropdownChange = this.onDropdownChange.bind(this)
    }

    componentDidMount() {
        this.getData();
    }

    onDropdownChange(selectVal){
            this.getData();
        }

    getData(){
        fetch("api")
        .then(response => {
            let test = !response.defaultApiMessage;
            this.setState({
                defaultMessage: test
            })
        })
    }

    render() {

        return(
            <Dropdown 
            onChange={this.onDropdownChange}
            />
            <div>
            { 
            this.state.defaultMessage && (
            <Alert message="test" />
            )
            }
            </div>
        )
    }

    }

Answer 2

将onDropdownChange从render函数中移出，因为每次重新渲染组件时都会调用它。

这可能导致多次重新渲染，并且可能是多次看到警报行为的原因。

反应警报消息显示两次

2 个答案: