英文:
TypeError: Cannot read properties of null (reading 'type')
问题
我想在React应用中打印警报，但我无法打印，因为这个问题。当键入{props.alert.type}和{props.alert.msg}时，代码不起作用。所以请帮助我解决这个问题。
import React, { useState } from 'react';
import Alert from './component/Alert';
import TextFrom from './component/TextFrom';
function App() {
const [mode, setMode] = useState('light'); // 是否启用暗模式
const [alert, setAlert] = useState(null);
const showAlert = (message, type) => {
setAlert({
msg: message,
type: type
});
};
const toggleMode = () => {
if (mode === 'light') {
setMode('dark');
document.body.style.backgroundColor = '#14142c';
showAlert("Dark mode is enabled", "success");
} else {
setMode('light');
document.body.style.backgroundColor = 'white';
showAlert("Light mode is enabled", "success");
}
};
return (
<>
<Navbar title="TextUtils" mode={mode} toggleMode={toggleMode} />
<Alert alert={alert} />
<div className='container'>
<TextFrom heading="Enter the text given below" mode={mode} />
</div>
</>
);
}
export default App;
import React from 'react';
function Alert(props) {
return (
<div>
{props.alert && (
<div className="alert alert-warning alert-dismissible fade show " role="alert">
<strong>{props.alert.type}:</strong> {props.alert.msg}
<button type="button" className="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
)}
</div>
);
}
export default Alert;
请注意，我已经修复了一些拼写错误，并稍微改进了代码以使其更容易理解。希望这可以帮助您解决问题。如果问题仍然存在，请提供更多详细信息。
英文:
i want to print Alert in react app but i can't able to print coz this.
when type {props.alert.type} as well as {props.alert.mag} the code not working .
so please help m get stuck in this code
import React, { useState } from 'react';
import Alert from './component/Alert';
import TextFrom from './component/TextFrom';
function App() {
const[mode,setMode] = useState('light');//wheather dark mode is enabled or not
const [alert, setAlert] = useState(null);
const showAlert=((message,type)=>{
setAlert( {
msg:message,
type:type
})
const toggleMode=()=>{
if(mode === 'light'){
setMode('dark')
document.body.style.backgroundColor='#14142c';
showAlert("Dark modes enabled", "success");
}
else{
setMode('light')
document.body.style.backgroundColor='white';
showAlert("light mode is enabled", "success");
}
}
return (
<>
<Navbar title="TextUtils" mode={mode} toggleMode={toggleMode} />
<Alert alert={alert}/>
<div className='container'>
<TextFrom heading="Enter the text given below" mode={mode}/>
</div>
</>
);
}
export default App;
// upper code is this for 'App' main page.
// bottom is another page //
import React from 'react'
function Alert(props) {
return (
<div>
props.alert && <div className="alert alert-warning alert-dismissible fade show " role="alert">
<strong>{props.alert.type}</strong>: {props.alert.msg}
<button type="button" className="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</div>
)
}
export default Alert
so please help me to resole the code so i can continue the work on the website .
this output is showing when m run this app given below the screen.
答案1
得分: 1
在你的Alert组件中似乎存在语法错误，缺少了一些花括号。
请使用以下行替换Alert组件中的以下行：
{props.alert && <div className="alert alert-warning alert-dismissible fade show " role="alert">}
这应该解决问题并正确渲染警报。
英文:
There seems to be a syntax error in your Alert component, it's missing some curly braces.
Replace the following line in your Alert component:
props.alert && <div className="alert alert-warning alert-dismissible fade show " role="alert">
With the following line:
{props.alert && <div className="alert alert-warning alert-dismissible fade show " role="alert">
This should fix the issue and render the alert properly.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论