反应代码:
const Home = ({ user, history, profile }) => {
if (!user.token) history.push("/pages/login");
const uploadRef = useRef(null);
const [editorState, setEditorState] = useState("About Me");
const [video, setVideo] = useState(true);
return (
<div className="home">
{!user.token && <Redirect to="/pages/login" />}
<h3>
Your personal profile information
<span className="ml-2 home__title">Preview</span>
</h3>
<ProfilePhoto profile={profile} />
<div className="home__block">
<div className="home__block__self">
<span>Full Name</span>
<Input className="home__block__self__input" placeholder="Full Name" />
</div>
<div className="home__block__self mt">
<span>Location</span>
<Input className="home__block__self__input" placeholder="NY" />
</div>
</div>
<div className="home__block">
<span className="home__block__label">Describe Yourself</span>
<div className="home__block__editor">
<DefaultEditor
value={editorState}
onChange={(e) => setEditorState(e.target.value)}
/>
</div>
</div>
<div className="home__block">
<span className="home__block__label">
{video === true ? (
<span>
Upload Video Or{" "}
<span
className="home__block__label__change"
onClick={() => setVideo((prevVideo) => !prevVideo)}
>
Add Link
</span>
</span>
) : (
<span>
Add Link Or{" "}
<span
className="home__block__label__change"
onClick={() => setVideo((prevVideo) => !prevVideo)}
>
Upload Video
</span>
</span>
)}
</span>
{video === true ? (
<div className="mt">
<div className="home__block__file__fake">
<div className="d-flex justify-content-center">
<img src={Upload} alt="" />
</div>
<div>
<p className="home__block__file__fake__title">Drag and drop</p>
</div>
<div>
<p className="home__block__file__fake__title__disabled">-or-</p>
</div>
<div className="d-flex justify-content-center">
<Button.Ripple
styyle={{ width: "300px" }}
outline
color="info"
onClick={() => uploadRef.current.click()}
>
Select a file on your computer to upload
</Button.Ripple>
</div>
</div>
<input type="file" className="home__block__file" ref={uploadRef} />
</div>
) : (
<div className="mt">
<label>Link</label>
<Input placeholder="Link" />
</div>
)}
</div>
<div className="home__block">
<IndicateLessons profile={profile} />
</div>
<div className="home__block">
<PrivateTutoring profile={profile} />
</div>
<div className="home__block">
<Awards profile={profile} />
</div>
<div className="home__save">
<Button color="primary">Save</Button>
</div>
</div>
);
};
const props = connect((state) => ({ user: state.auth.user }), null);
export default props(Home);
崩溃:Warning: Cannot update during an existing state transition (such as within
渲染). Render methods should be a pure function of props and state.
。如果使用类组件重写,则不会出现错误。为什么会这样?
您将相同的逻辑写了两次。
当组件安装在效果挂钩内时使用此逻辑一次
并且不要破坏 钩子的规则