使用 useState 更改多个值

Question

希望有人能帮帮我。

我正在尝试将两个参数传递给

第一个参数是setOpenModal 第二个参数是 setLinkVideo

我对第一个参数没有问题，但无法使第二个参数起作用。

以下行也不起作用：

 {openModal && <Modal closeModal={setOpenModal} videoLink={setLinkVideo} />}

希望有人能帮我找到解决办法。

提前谢谢！！！


function Publicidade() {
    const [openModal, setOpenModal] = useState(false);
    const [linkVideo, setLinkVideo] = useState('');
    return (
        <div className='publicidade_root'>
            <div className='publicidade_body'>
                <div className='publi_list'>
                    <ul>
                        <li className='grid-item-1'>
                            <img id='item-1' className='img_move' data-video-link='item-1'
                                onClick={() => { setOpenModal(true) && setLinkVideo({iframe_01}) }}
                                src="https://tse1.mm.bing.net/th?id=OIP.KRDXVIDQh58FyCzeWRV2jAHaKi&pid=Api&P=0&w=122&h=173" alt=""></img></li>
                        <li className='grid-item-2'><img id='item-2' className='img_move' data-video-link='item-2' src="https://tse3.mm.bing.net/th?id=OIP.iiNSdtlTfIksFCStwuqEKQHaKZ&pid=Api&P=0&w=300&h=300" alt=""></img></li>
                        <li className='grid-item-3'><img id='item-3' className='img_move' data-video-link='item-3' src="https://tse4.mm.bing.net/th?id=OIP.YUVGxJdqNxT4NdWPq7hgHAHaKT&pid=Api&P=0&w=126&h=176" alt=""></img></li>
                        <li className='grid-item-4'><img id='item-4' className='img_move' data-video-link='item-4' src="https://tse1.mm.bing.net/th?id=OIP.GxK5g9AKfaRXrUDoII5jfAAAAA&pid=Api&P=0&w=109&h=164" alt=""></img></li>
                        <li className='grid-item-5'><img id='item-5' className='img_move' data-video-link='item-5' src="https://tse4.mm.bing.net/th?id=OIP.MMxSQ1rBFPYOHJiVNQbD3QAAAA&pid=Api&P=0&w=100&h=164" alt=""></img></li>
                        <li className='grid-item-6'><img id='item-6' className='img_move' data-video-link='item-6' src="https://tse4.mm.bing.net/th?id=OIP.X7OKyOWHoQzBzp2-_cStPgHaJQ&pid=Api&P=0&w=139&h=173" alt=""></img></li>
                        <li className='grid-item-7'><img id='item-7' className='img_move' data-video-link='item-7' src="https://tse3.mm.bing.net/th?id=OIP.6-g9SGkt2QB8lbjvh9kXbwAAAA&pid=Api&P=0&w=122&h=163" alt=""></img></li>
                        <li className='grid-item-8'><img id='item-8' className='img_move' data-video-link='item-8' src="https://tse3.explicit.bing.net/th?id=OIP.lx5LNDQNw7TLJopHXUoFzAAAAA&pid=Api&P=0&w=125&h=165" alt=""></img></li>
                        <li className='grid-item-9'><img id='item-9' className='img_move' data-video-link='item-9' src="https://tse2.mm.bing.net/th?id=OIP.PP2QRhakz8QpWCqfiekCrwHaLH&pid=Api&P=0&w=112&h=168" alt=""></img></li>

                    </ul>
                </div>
            </div>
            {openModal && <Modal closeModal={setOpenModal} videoLink={setLinkVideo} />}
        </div>
    )
}
export default Publicidade;

Answer 1

你应该做

() => {
  setOpenModal(true);
  setLinkVideo({iframe_01})
}

因为 setOpenModal(true) && setLinkVideo({iframe_01}) 不会运行 setLinkVideo 函数，因为 setOpenModal(true) 的结果未定义

希望对您有所帮助！

Answer 2

在您的 HTML img 标记中，在 onClick 属性内，有些代码无法正常工作。在您的示例中，两个函数位于一个运算符之间，因此这两个函数都没有被执行。要修复您的代码，您应该执行以下操作：

创建一个类似于 handleImageClick 的函数，它将视频 link 作为参数，并调用两个 React setState 函数

   const handleImageClick = (videoLink) => {
     setOpenModal(true)
     setLinkVideo(videoLink)
   }

还要检查 Modal 组件属性 videoLink，因为从示例来看它似乎需要值，而不是设置视频的函数 link。或者会建议检查您的函数和变量命名。如果 Modal 从内部可以改变 videoLink 应该有两个道具，用于值和值设置。例如：<Modal closeModal={setOpenModal} videoLink={videoLink} setVideoLink={setLinkVideo} />

使用 useState 更改多个值

change multiple values with useState

javascript

modal-dialog

reactjs

use-state