bugfix> reactjs > 投稿

反応ブートストラップでメディアリストを使用してボタンをクリックすると新しい画面に移動する関数を実装しましたが、その関数は画面の読み込み時に自動的に呼び出されます。

これは私のコードです

function News() {
    
    const history = useHistory()
    const [eventData, setEventdata] = useState('');
    const [MemberOffer, setMemberOffer] = useState('');
    const [Loading, setLoading] = useState(true);
    const [Loading2, setLoading2] = useState(true);
    useEffect(() => {
        getDatafromserver()
        getallmemebroffers()
        Logincheck()
    }, []);
    async function getDatafromserver() {
        console.log("inside getDatafromserver funcation")
        try {
            await fetch('http://124.43.17.60:4000/getallevent')
                .then((response) => response.json())
                .then((json) => setEventdata(json.Rows))
                .catch((error) => alert('Please check your network'))
                .finally(() => setLoading(false))
            console.log("rana data", eventData)
            console.log("loding....", Loading)
        } catch (error) {
            console.log("error when get data from server")
        }
    }
    async function getallmemebroffers() {
        console.log("inside memebr offer funcation")
        try {
            await fetch('http://124.43.17.60:4000/memoffers')
                .then((response) => response.json())
                .then((json) => setMemberOffer(json.news))
                .catch((error) => alert('Please check your network'))
                .finally(() => setLoading2(false))
            console.log("Member offers", MemberOffer)
            console.log("loding....", Loading2)
        } catch (error) {
            console.log("error when get data from server")
        }
    }
    const Logincheck = () => {
        console.log("inside login check")
        try {
            Axios.get("http://124.43.17.60:4000/loging_check")
                .then((response) => {
                    console.log("res cookie", response)
                })
        } catch (error) {
            console.log("No internet")
        }
    }
    function editNews(){
        history.push('/admin/edit-news')
    }
   
    return (
        <div className='home' >
            <br></br>
            <Card style={{ height: 'auto' }} >
                {/* memebr offer */}
                <Card.Header style={{ borderColor: 'white', fontSize: '30px', fontFamily: 'Quicksand-Bold' }}>Tech News</Card.Header>
                {Loading2 ? <Loader type="Circles" color="#00BFFF" height={80} width={80} /> : (
                    <div>
                        {MemberOffer.map((object, index) => (
                            // <p key={index.id}>{object.event_name}</p>
                            <Card.Body >
                                <ul className="list-unstyled" style={{ marginLeft: '20px' }}>
                                    <Media as="li">
                                        <img
                                            width={72}
                                            height={72}
                                            className="mr-3"
                                            src={object.offer_image}
                                            alt="Generic placeholder"
                                        />
                                        <Media.Body style={{ marginLeft: '10px' }}>
                                            <h5 style={{ fontSize: '20px', fontFamily: 'Quicksand-Bold' }}>{object.offer_name}</h5>
                                            <p style={{ fontSize: '15px', fontFamily: 'Quicksand-Medium', color: '#707070' }}>
                                                {object.offer_content}
                                            </p>
                                        </Media.Body>
                                        <Button variant="primary" onClick={editNews()}>Edit</Button>
                                        
                                    </Media>
                                    <br></br>
                                </ul>
                            </Card.Body>
                        ))}
                    </div>
                )}
            </Card>
           
        </div >
    )
}
export default News

ページをリロードすると、このeditNews()関数はすでに呼び出されており、[編集]ボタンをクリックせずにEditNewsページに移動します。このコードで私が間違っていることを誰かに教えてもらえますか?この問題を解決するのを手伝ってください