Onclick警報并在reactjs中顯示NextItem

當我單擊 BUSINESS NEWS 1/17/2022 20:00 時，我想顯示下一個專案名稱，警報彈出視窗和顯示中的下一個專案名稱或 EVENING NEWS 1/17/2022 19:00

代碼：-

         const [comments, setComments] = useState([]);
    const [getname, linkName] = useState([]);

    useEffect(() => {
        callData();
    }, [])

    function callData() {
        axios.get(`http://localhost:9763/api/getRundown`,
            {
                headers: {
                    "accepts": "application/json",
                    'Access-Control-Allow-Origin': '*',
                },
                auth: {
                    username: 'admin',
                    password: 'password'
                },
                parms: {
                    Playlist: 'all'
                }
            })
            .then(response => {
                //setComments([...Object.values(response.data).flat()]);
                //console.log(response.data.Rundowns);
                setComments(response.data.Rundowns);
                //setComments([response.data]);
                //  console.log([response.data]);
            }).catch(error => {
                error('unable to fetch URL', error);
            });
    }

    function myClick(name) {
         alert(`click! ${name} `);
        linkName(name);
    }


    return (
        <div>
            <div className="box">
                <div className="header">
                    <div className="header-text1">Playlists</div>
                    <div className="header-text2"><FaCircle style={{ color: "#10C300", width: "10px", height: "10px" }} /> <FaCircle style={{ color: "#FC0000", width: "10px", height: "10px" }} /></div>
                </div>
                <div>


                    {comments.map((val, index) => {
                        // console.log("Inside map:", getname);
                        return (
                            <div className="TextLink" key={index}>
                                {/* <button onClick={myClick}>{val}</button> */}
                                <NavLink onClick={() => myClick(val)} to={{
                                    pathname: "/tableCheck"
                                }}>
                                    {val}</NavLink>
                            </div>
                        )
                    })
                    }
                </div>
                {/* style={({ isActive }) =>
                                    isActive
                                        ? {
                                            color: 'red',
                                            background: '#151920',
                                        }
                                        : { color: 'white' }
                                }
                                    > */}

            </div>
            <div className="Bottombox">
                <div className="header">
                    <div className="header-text1">Alerts</div>
                    <div className="header-text2"><FaCircle style={{ color: "#10C300", width: "10px", height: "10px" }} /> <FaCircle style={{ color: "#FC0000", width: "10px", height: "10px" }} /></div>
                </div>
                <div style={{ color: "white" }}></div>
            </div>
            <TableCheck val={getname} />
        </div>

    )
}

此上部代碼僅可用于顯示當前單擊，而不是下一個專案，所以如果沒有要顯示的專案，當我單擊時如何顯示下一個專案名稱它在警報中顯示 null

uj5u.com熱心網友回復：

您可以嘗試將當前迭代的索引傳遞給 onClick 函式，然后訪問陣列中的下一個值（并檢查以確保它不是 null 或空字串）。像這樣：

<NavLink onClick={(index) => myClick(index)} to={{.....

并嘗試修改 myClick 函式：

    function myClick(index) {
       if(comments[i 1] !== '' && comments[i 1] !== null) {
         alert(`click! ${name}`);
         linkName(comments[i 1]);
       }
    }
Hope you understood my answer let me know if you got a question or the issue is not solved yet.

uj5u.com熱心網友回復：

據我所知（我不是很清楚），您應該使用useStatereact hook 來重新渲染，以便 react 知道接下來要渲染什么專案。

您能否顯示整個代碼，以便我了解發生了什么？

標籤：

上一篇：為什么rem的值沒有變化？

下一篇：AxiosResponse和UseQueryResult的型別錯誤