我正在提取数据并显示在编辑字段中,但当我刷新页面时,数据不显示。

huangapple go评论68阅读模式
英文:

I am fetching data and showing in field to edit, but when i refresh the page data not show

问题

I understand that you're having an issue with your React code, and you provided code that you want me to help you with. Let's address the issue you mentioned.

The error you are encountering, "Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead," suggests that you need to update your code to use the new React 18 features. React 18 introduced concurrent rendering and a new API for rendering components.

To fix this issue, you can update your code like this:

  1. Import createRoot from React.
import { createRoot } from 'react-dom';
  1. Replace your ReactDOM.render code with createRoot and render:
// Replace this:
// ReactDOM.render(<YourComponent />, document.getElementById('root'));

// With this:
const root = createRoot(document.getElementById('root'));
root.render(<YourComponent />);

This change will make your code compatible with React 18.

Regarding the issue with "enableReinitialize," if you want your form fields to show the data after refreshing the page, you should make sure that the initial values in formik are set correctly. You can set the initial values in useFormik to ensure that the form fields display the data properly even after a page refresh. It looks like you're already doing that in your code, but make sure that data?.reward is correctly populated with the data you want to display.

If you're still facing issues with the form data not displaying correctly, please provide more specific information about the problem you're encountering.

英文:
.........
.........
const [image, setImage] = useState&lt;any&gt;(`http://localhost:3000`+data?.reward?.Media?.url)
const { userData } = useContext(UserAuthContext);
const [open, setOpen] = useState(false);
const navigate = useNavigate();
const [
editRewardWithoutImage,
{
data: editRewardWithoutImageData,
error: editRewardWithoutImageError,
loading: editRewardWithoutImageLoading,
},
] = useMutation(UPDATE_REWARD_WITHOUT_IMAGE);
const [
editRewardWithImage,
{
data: editRewardWithImageData,
error: editRewardWithImageError,
loading: editRewardWithImageLoading,
},
] = useMutation(UPDATE_REWARD_WITH_IMAGE);
const formik = useFormik({
enableReinitialize: true,      //i am using enableReinitialize here
initialValues: {
rewardname: data?.reward?.RewardName,
rewarddescription: data?.reward?.RewardDescription,
image: {
preview: &quot;&quot;,
raw: &quot;&quot;
},
rewardvalue: data?.reward?.Points,
quantity: data?.reward?.AvailableQuantity,
file: undefined,
},
validationSchema: validationSchema,
onSubmit: (values: any) =&gt; {
if(!values.file){
console.log(&quot;in if&quot;)
editRewardWithoutImage({
variables:{
id: id,
rewardName: values.rewardname,
rewardDescription: values.rewarddescription,
availableQuantity: values.quantity,
points: values.rewardvalue
}
})
}else{
editRewardWithImage({
variables:{
id: id,
rewardName: values.rewardname,
rewardDescription: values.rewarddescription,
availableQuantity: values.quantity,
points: values.rewardvalue,
imageUrl: values.file
}
})
}
}
})
useEffect(() =&gt; {
if (editRewardWithoutImageData || editRewardWithImageData) {
setOpen(true);
// setTimeout(function () {
//     navigate(&#39;/rewardlist&#39;)
// }, 3000);
}
if (editRewardWithoutImageError || editRewardWithImageError ) {
alert(&quot;something went wrong!&quot;);
formik.resetForm();
}
}, [editRewardWithoutImageData, editRewardWithoutImageError, editRewardWithImageData, editRewardWithImageError])
............................
.............................
return (&lt;&gt;
&lt;Stack
sx={style.main}
&gt;
&lt;Box sx={style.titleParent}
borderBottom={1}
borderColor={&#39;#E1E6E8&#39;}
&gt;
&lt;Typography sx={style.title}&gt; New listing&lt;/Typography&gt;
&lt;/Box&gt;
&lt;Box sx={style.formParent}&gt;
&lt;form onSubmit={formik.handleSubmit}&gt;
&lt;Box sx={style.formInputParent}&gt;
&lt;Box sx={style.inputSec1} &gt;
&lt;TextField
value={formik.values.rewardname}
onChange={(e) =&gt; {
formik.handleChange(e);
setIsDirty(true);
}}
error={formik.touched.rewardname &amp;&amp; Boolean(formik.errors.rewardname)}
//  helperText={formik.touched.rewardname &amp;&amp; formik.errors.rewardname}
required id=&quot;rewardname&quot; name=&quot;rewardname&quot; label=&quot;Reward name&quot; variant=&quot;outlined&quot; fullWidth /&gt;
&lt;TextField
id=&quot;rewarddescription&quot;
name=&quot;rewarddescription&quot;
value={formik.values.rewarddescription}
onChange={(e) =&gt; {
formik.handleChange(e);
setIsDirty(true);
}}
multiline
minRows={3}
placeholder=&quot;Reward description&quot;
error={formik.touched.rewardname &amp;&amp; Boolean(formik.errors.rewardname)}
// helperText={formik.touched.rewardname &amp;&amp; formik.errors.rewardname}
required label=&quot;Reward description&quot; variant=&quot;outlined&quot; fullWidth /&gt;
&lt;/Box&gt;
&lt;Box sx={style.divider} &gt;&lt;/Box&gt;
&lt;Box sx={style.inputSec2}&gt;
&lt;Typography sx={style.rewardDetails}&gt;Reward details&lt;/Typography&gt;
&lt;Box sx={{ border: 1, marginTop: &#39;16px&#39;, borderColor: &#39;#E1E6E8&#39;, width: &#39;100%&#39; }} &gt;&lt;/Box&gt;
&lt;Typography sx={style.mediaText}&gt;Media&lt;/Typography&gt;
{/* &lt;Box sx={style.fileUploadParent} &gt;
{&lt;&gt;&lt;label htmlFor=&quot;image&quot;&gt;
{image &amp;&amp; &lt;img
src={image}
style={{ height: 130, }}
alt={&#39;Logo&#39;}
loading=&quot;lazy&quot;
color=&#39;red&#39;
/&gt;}
{!image &amp;&amp;  &lt;Typography sx={style.uploadImgText}&gt;Upload image&lt;/Typography&gt;}
&lt;/label&gt;
&lt;/&gt;}
&lt;input
type=&quot;file&quot;
id=&quot;image&quot;
name=&quot;image&quot;
required
style={style.file}
onChange={(event) =&gt; {
if (event?.target?.files) {
setImage(URL.createObjectURL(event?.target.files[0]))
formik.setFieldValue(&quot;file&quot;, event?.target?.files[0])
}
}}
/&gt;
&lt;/Box&gt; */}
&lt;Box sx={{position:&quot;relative&quot;, ...style.fileUploadParent}}&gt;
{image ? (
&lt;&gt;
&lt;label htmlFor=&quot;image&quot;&gt;
&lt;img
src={image}
style={{ height: 130, display:&quot;flex&quot;, justifyContent:&quot;center&quot;, alignSelf:&quot;center&quot;}}
alt=&quot;Logo&quot;
loading=&quot;lazy&quot;
color=&quot;red&quot;
/&gt;
&lt;Typography sx={{
position: &quot;absolute&quot;,
top: &quot;50%&quot;,
left: &quot;50%&quot;,
transform: &quot;translate(-50%, -50%)&quot;,
cursor: &quot;pointer&quot;,
...style.uploadImgText, 
}}&gt;Change Image&lt;/Typography&gt;
&lt;/label&gt;
&lt;/&gt;
) : (
&lt;&gt;
&lt;label htmlFor=&quot;image&quot;&gt;
&lt;Typography sx={style.uploadImgText}&gt;Upload image&lt;/Typography&gt;
&lt;/label&gt;
&lt;/&gt;
)}
&lt;input
type=&quot;file&quot;
id=&quot;image&quot;
name=&quot;image&quot;
style={style.file}
onChange={(event) =&gt; {
setIsDirty(true);
if (event?.target?.files) {
setImage(URL.createObjectURL(event?.target.files[0]));
formik.setFieldValue(&quot;file&quot;, event?.target?.files[0]);
}
}}
/&gt;
&lt;/Box&gt;
&lt;Box sx={style.divider1} &gt;&lt;/Box&gt;
&lt;Typography sx={style.valueText}&gt;Value&lt;/Typography&gt;
&lt;Typography sx={style.valueDesc}&gt;This will be deducted from the student’s total accumulated points&lt;/Typography&gt;
&lt;TextField
sx={style.rewardvalInput}
value={formik.values.rewardvalue}
onChange={(e) =&gt; {
formik.handleChange(e);
setIsDirty(true);
}}
type=&#39;number&#39;
error={formik.touched.rewardvalue &amp;&amp; Boolean(formik.errors.rewardvalue)}
// helperText={formik.touched.rewardvalue &amp;&amp; formik.errors.rewardvalue}
required id=&quot;rewardvalue&quot; name=&quot;rewardvalue&quot; label=&quot;Reward points&quot; variant=&quot;outlined&quot; fullWidth /&gt;
&lt;Box sx={style.divider1} &gt;&lt;/Box&gt;
&lt;Typography sx={style.qtyText}&gt;Available quantity&lt;/Typography&gt;
&lt;TextField
sx={style.rewardvalInput}
value={formik.values.quantity}
type=&#39;number&#39;
onChange={(e) =&gt; {
formik.handleChange(e);
setIsDirty(true);
}}
error={formik.touched.quantity &amp;&amp; Boolean(formik.errors.quantity)}
// helperText={formik.touched.quantity &amp;&amp; formik.errors.quantity}
required id=&quot;quantity&quot; name=&quot;quantity&quot; label=&quot;Reward quantity&quot; variant=&quot;outlined&quot; fullWidth /&gt;
&lt;/Box&gt;
&lt;/Box&gt;
&lt;Paper
sx={style.buttomButtonParent} elevation={0}&gt;
&lt;LoadingButton
loading={deleteRewardLoading}
loadingPosition=&#39;center&#39;
onClick={() =&gt; deleteRewardButton()}
variant=&quot;outlined&quot;
color=&quot;error&quot;
sx={{  borderRadius: &#39;4px&#39;, height: &#39;44px&#39;, width: &quot;fit-content&quot;, paddingY: &#39;10px&#39;, paddingX: &#39;24px&#39;, alignItems: &#39;center&#39;, display: &#39;flex&#39;, gap: &#39;6px&#39;}}
&gt;
Delete
&lt;/LoadingButton&gt;
{/* &lt;Button
type=&#39;submit&#39;
sx={style.publishParent}&gt;
&lt;Typography sx={{ textTransform: &#39;none&#39; }} style={style.publishText}&gt;Publish&lt;/Typography&gt;
&lt;/Button&gt; */}
&lt;LoadingButton
type=&#39;submit&#39;
loading={editRewardWithoutImageLoading || editRewardWithImageLoading}
loadingPosition=&#39;center&#39;
disabled={!isDirty || editRewardWithoutImageLoading || editRewardWithImageLoading}
sx={style.publishParent} variant=&quot;contained&quot; disableElevation&gt;
&lt;Typography sx={{
fontWeight: &#39;500&#39;,
fontSize: &#39;16px&#39;,
lineHeight: &#39;24px&#39;,
letterSpacing: &#39;-0.2px&#39;,
textTransform: &#39;none&#39;,
}}&gt;Update&lt;/Typography&gt;
&lt;/LoadingButton&gt;
&lt;/Paper&gt;
&lt;/form&gt;
&lt;/Box&gt;
&lt;/Stack&gt;
&lt;/&gt;)
}

i tried enableReinitialize: true, but its showing the data with label. and Image is also not available.It should show the data after refreshing the page in field.
when i click on the tab of this then it shows the data properly but after reresh it dont. And please help me to solve the problem......

showing error : react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17 in console.

答案1

得分: 0

数据在页面加载后出现。因此,我们必须等待数据并显示加载程序,而不是渲染页面。因此,您必须添加等待加载程序,当数据获取后,再渲染带有数据的页面。

英文:

Data comes after the page loads. So we have to wait for data and show loader instead of rendering the page. So you have to add loader for waiting, and when data fetched then render the page with data.

huangapple
  • 本文由 发表于 2023年4月4日 13:46:25
  • 转载请务必保留本文链接:https://go.coder-hub.com/75925865.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定