Я создаю веб-сайт-портфолио с помощью React + TypeScript и Redux. У меня есть компонент помощника по чату, который должен появляться только после того, как пользователь нажимает кнопку «Пуск» (которая устанавливает для app.ready значение true в состоянии Redux).
Однако при нажатии кнопки «Просмотр» весь экран становится белым.
Мой компонент,
const ChatAssistant = () => {
const [isExpanded, setIsExpanded] = useState(false)
const [showOptions, setShowOptions] = useState(false)
const [showMessage, setShowMessage] = useState(false)
const [showButtons, setShowButtons] = useState(false)
const app = useSelector((state: RootState) => state.app)
const handleToggle = () => {
setIsExpanded(!isExpanded)
if (isExpanded) {
setShowOptions(false)
setShowMessage(false)
setShowButtons(false)
}
}
// Trigger animations when chatbox opens in portfolio
useEffect(() => {
if (isExpanded) {
setTimeout(() => setShowMessage(true), 300)
setTimeout(() => setShowButtons(true), 1500)
} else {
setShowMessage(false)
setShowButtons(false)
}
}, [isExpanded])
const handleYes = () => {
setShowButtons(false)
setTimeout(() => {
setShowOptions(true)
setTimeout(() => setShowButtons(true), 300)
}, 200)
}
const handleNo = () => {
setIsExpanded(false)
setShowOptions(false)
}
// Only show after explore button is clicked
if (!app.ready) {
return null
}
return (
{/* Component JSX */}
)
}
Подробнее здесь: https://stackoverflow.com/questions/798 ... i-fix-this
