I have a mock mutation like so:
interface Person {
firstName: string;
lastName: string;
}
async function sendPersonApi({ firstName, lastName }: Person) {
await new Promise((res) => setTimeout(res, 1000));
return {
firstName,
lastName,
status: "success"
};
}
I have two components: <Form /> and <Output />. I basically want the mutation to run on form submit of the <Form />, and then show the result of that mutation in the <Output />.
I have a CodeSandbox with this behavior mostly working: https://codesandbox.io/s/long-worker-k350q?file=/src/App.tsx
Form
const personAtom = atom<Person>({
firstName: "",
lastName: ""
});
function Form() {
const [formState, setFormState] = useAtom(personAtom);
const handleSubmit: FormEventHandler<HTMLFormElement> = useCallback(
(event) => {
event.preventDefault();
const formElement = event.currentTarget;
const formData = new FormData(formElement);
const firstName = formData.get("firstName") as string;
const lastName = formData.get("lastName") as string;
setFormState({ firstName, lastName }); // This does not update the `data`/`isLoading`/`isError` in the <Output /> component
},
[setFormState]
);
return (
<form id="name-form" onSubmit={handleSubmit}>
<input name="firstName" /> <br />
<input name="lastName" /> <br />
<button>Submit</button>
</form>
);
}
Output
function Output() {
const [person] = useAtom(personAtom);
const { mutate, data, isLoading, isError } = useMutation(sendPersonApi, {
mutationKey: "sendPerson"
});
useEffect(() => {
mutate(person);
}, [person]);
return (
<output name="name-output" form="name-form">
<p>data: {JSON.stringify(data)}</p>
<p>isLoading: {JSON.stringify(isLoading)}</p>
<p>isError: {JSON.stringify(isError)}</p>
</output>
);
}
Initially, I had wanted to implement this by doing the mutation itself inside the <Form /> submit handler, but it seems like I was not be able to access the data/isLoading/isError in a different component even if I used the same mutationKey in useMutation.
So I ended up changing the implementation so that the submit handler just updates some global state (using jotai atoms), and then in the Output I have an effect that listens for changes to this global state and then calls mutate().
The problem now though is that the data always gets reset to undefined in every subsequent submit before getting a new value. Is there a way to stop useMutation from setting data to undefined before updating it to a new value?
Also, is there a cleaner way of using the result of a mutation in another component? I'd prefer to have the mutate() done inside the Form and then somehow use the data/isLoading/isError in a different component without having to rely on useEffect.
I think I'm going to just create a separate atom to hold the global state for the current data. Then I'll use the onSuccess of the useMutation to update this global state from within <Form /> and then just use that global state inside <Output />.
Related
In my ReactJS frontend I am building a form where the user can view and edit settings. The form is part of a function that does the following:
Call the backend to get the settigs. Store the result from backend in variable data
Map/show the data in text fields
When the user clicks "Submit" then send changes as json back to the backend.
This is a picture of the flow:
This is a picture of the ReactApp:
This is my code so far:
import { useContext, useEffect, useState } from "react";
export function Settings() {
const [data, setData] = useState([]);
// Send general settings
const handleSubmit = async (e) => {
e.preventDefault();
let result = await fetch("https://localhost:5002/api/update_settings", {
method: "POST",
headers: {
'Content-Type': 'application/json'
},
body: data,
});
let resultJson = await result.json();
let resultMessage = resultJson['message']
let resulData = resultJson['data']
let resultError = resultJson['error']
if (result.status === 200 || result.status === 201) {
document.getElementById("feedback_div").style.display = "block";
document.getElementById("feedback_p").innerHTML = resultMessage;
}
else{
document.getElementById("feedback_div").style.display = "block";
document.getElementById("feedback_p").innerHTML = resultError + " " + resultMessage;
}
};
useEffect(() => {
fetch('https://localhost:5002/api/get_settings')
.then(response => response.json())
.then(json => setData(json))
}, []);
return (
<div>
<h1>Settings</h1>
{/* Feedback */}
<div id="feedback_div" style={{display: "none"}}><p id='feedback_p'>Feedback box is here</p></div>
{/* Form */}
<form onSubmit={handleSubmit}>
<label>
<p>Title</p>
<input type="text" name="inp_title" value={data?.settings_website_title} onChange={(e) => setData(e.target.value)} />
</label>
<label>
<p>Title short</p>
<input type="text" name="inp_title_short" value={data?.settings_website_title_short} onChange={(e) => setData(e.target.value)} />
</label>
<p><button>Submit</button></p>
</form>
</div>
);
}
export default Settings;
Backend get_settings return value:
{
"settings_website_title", "My Website",
"settings_website_title_short", "MyWeb"
}
My problems:
How can I send the data back to the backend? I belive that when the user makes changes into the text box I call onChange={(e) => setData(e.target.value)} but I do not think this is correct? Because data should be the JSON, and not a single value.
Also I get this error on this code:
Warning: A component is changing an uncontrolled input to be
controlled. This is likely caused by the value changing from undefined
to a defined value, which should not happen. Decide between using a
controlled or uncontrolled input element for the lifetime of the
component. More info: https://reactjs.org/link/controlled-components
but I do not think this is correct? Because data should be the JSON, and not a single value.
Indeed. Instead of setting the entirety of state to one value, set it to an updated version of itself in which that one value is changed. For example:
<input
type="text"
name="inp_title"
value={data?.settings_website_title}
onChange={(e) => setData({ ...data, settings_website_title: e.target.value })}
/>
You can extract multiple settings into a single update handler if you align the name of the element with the property being updated. For example:
<input
type="text"
name="settings_website_title"
value={data?.settings_website_title}
onChange={handleChange}
/>
and...
<input
type="text"
name="settings_website_title_short"
value={data?.settings_website_title_short}
onChange={handleChange}
/>
Then your handleChange function can be something like:
const handleChange = e => {
setData({
...data,
[e.target.name]: e.target.value
});
};
In either case, you're replacing the state object with a copy of itself, changing only the one property updated by that <input> value.
Warning: A component is changing an uncontrolled input to be controlled...
This is because the initial values for your inputs are undefined (or possibly null). An empty string would be preferable in this case. Instead of using optional chaining for the values, initialize state to a default. For example:
const [data, setData] = useState({
settings_website_title: '',
settings_website_title_short: ''
});
Then you don't need the optional chaining in the value properties on your <input> elements:
value={data.settings_website_title}
Since data will always be a valid object with the properties you're looking for.
You are in right direction but doing small mistakes. Please follow below instructions to save the data successfully.
// 1. initialize your form inputs here,, it will be used to send data in api request body
const [data, setData] = useState({
settings_website_title: "",
settings_website_title_short: ""
});
// 2. You can't override the data in #data varaible. So your input will look something like this.
<input type="text" name="inp_title" value={data?.settings_website_title} onChange={(e) => setData({...data, settings_website_title: e.target.value})} />
// 3. on click of submit button call the method where you make api call
<button onClick={(e) => {handleSubmit()}}>Submit</button>
I have a situation where I need to call my DB to obtain some default values. But in the off-chance the data does not exist, I will set some default values in my useForm. Basically, this means that the defaultValues declared in useForm is a fallback value if I fail to obtain the default values from the DB.
From what Im understanding, according to the documentation with regards to useForm,
The defaultValues for inputs are used as the initial value when a component is first rendered, before a user interacts with it.
Or basically, the useForm is one of the first things defined when the page is loaded.
So, unless I can call my DB before useForm is loaded, Im a little stuck on this.
I've read that each Controller field can have something called defaultValue which sounds like the solution, but the documentation mentioned a caveat of
If both defaultValue and defaultValues are set, the value from defaultValues will be used.
I considered setValues but I want to use the isDirty function, which allows field validation and the value used to check whether the form is dirty is based on the useForm defaultValues. Thus, if I were to use setValues, the form would be declared dirty, which is something I do not want.
TL;DR this is what I want:
This is my initial value(the fallback value, result A).
const { formState: { isDirty }, } = useForm(
{defaultValues:{
userID: "",
userName: "",
userClass: "administrator",
}}
);
What I want to do is to make a DB call and replace the data, so that it would now look something like this(result B) if the call is successful(if fail, it will remain as result A).
const { formState: { isDirty }, } = useForm(
{defaultValues:{
userID: "1",
userName: "user",
userClass: "administrator",
}}
);
Please note that the DB call will replace only the userID and userName default values, the default value for userClass will be maintained.
So, the flow is as such:
Case 1: render form -> result A -> DB call -> success -> result B
Case 2: render form -> result A -> DB call -> fail/no data -> result A
So, unless I actually key in an input that is different from the default values of either results depending on the case, both Case 1 and Case 2 should return isDirty==false when I check it.
For react-hook-form#7.22.0 and newer
I think you want to use reset here in combination with useEffect to trigger it when your DB call has finished. You can additionally set some config as the second argument to reset, for example affecting the isDirty state in your case.
Although your answer works there is no need to use getValues here, as reset will only override the fields which you are passing to reset. Your linked answer is for an older version of RHF, where this was necessary.
Also if you're not adding a field dynamically on runtime then you can just pass the whole object you get from your DB call to reset and set the shouldUnregister to true in your useForm config. This way props from your result object which haven't got a corresponding form field will get ignored.
export default function Form() {
const { register, handleSubmit, reset, formState } = useForm({
defaultValues: {
userID: "",
userName: "",
userClass: "administrator"
},
shouldUnregister: true
});
console.log(formState.isDirty);
const onSubmit = (data) => {
console.log(data);
};
const onReset = async () => {
const result = await Promise.resolve({
userID: "123",
userName: "Brian Wilson",
otherField: "bla"
});
reset(result);
};
useEffect(() => {
onReset();
}, []);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<label>User ID</label>
<input type="text" {...register("userID")} />
<label>User Name</label>
<input type="text" {...register("userName")} />
<label>User Class</label>
<input type="text" {...register("userClass")} />
<input type="submit" />
</form>
);
}
Here is a Sandbox demonstrating the explanation above:
For older versions
Just merge your defaultValues or field values via getValues with the result of your DB call.
export default function Form() {
const {
register,
handleSubmit,
reset,
formState,
getValues,
control
} = useForm({
defaultValues: {
userID: "",
userName: "",
userClass: "administrator"
},
shouldUnregister: true
});
console.log(formState.isDirty);
const onSubmit = (data, e) => {
console.log(data);
};
const onReset = async () => {
const result = await delay();
reset({ ...getValues(), ...result });
};
useEffect(() => {
onReset();
}, []);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<label>User ID</label>
<input type="text" {...register("userID")} />
<label>User Name</label>
<input type="text" {...register("userName")} />
<label>User Class</label>
<Controller
name="userClass"
control={control}
render={({ field }) => <input type="text" {...field} />}
/>
<input type="submit" />
</form>
);
}
I went and further googled the issues I had with #knoefel's original answer, and I came across this
Thus, the solution I came up with, based on a combination with #knoefel's answer and the answer in the link:
useEffect(async () => {
let dataArray={};
let result= fetch('my-db-call');
if(result) {
dataArray['userID']=result.userID
dataArray['userName']=result.userName
}
reset({...getValues(), ...dataArray})
}, [])
Apparently, what happens is that the the reset function will first set the values, result A, using ...getValues() and any subsequent data after will replace the previously set values only if it exist. (eg. if my dataArray object lacks the userID key, it will not replace the userID default with the new default. ).
Only after both getValues and dataArray is set then will it reset the default values.
As far as I can tell, this is more or less incline with what I need and should give me result B.
I have a very simple submit form that I'm using React-hook-form to implement and I'm running into this strange issue where the global state isn't updated when I submit the first time, but it works the second time. Here's my code:
export default function Enter() {
const { register, handleSubmit, watch, formState: { errors } } = useForm();
const { state, dispatch } = useContext(Store)
const onSubmit = (data) => {
console.log('sending user: ', data.username)
dispatch({
type: 'SET_PLAYER',
payload: data.username
})
console.log('UPDATED CLIENT STATE: ', state)
}
return (
<>
<form onSubmit={handleSubmit(onSubmit)}>
<p>Enter your name to join lobby</p>
<input {...register("username", { required: true })} />
{errors.exampleRequired && <span>This field is required</span>}
<input type="submit" />
</form>
</>
);
}
Here's a picture of how state appears to be lagging behind, essentially:
Dominik's comment was spot-on. Even though updates to state are synchronous, state updates in between function refreshes so you should use data within the function and if you need to do something after that updates, then use useEffect and wait for the state change.
I posted an answer below, but if someone can explain why this is necessary you'll get the bounty, I went through a redux tutorial and feel like I didn't learn about mapDispatchToProps, only mapStateToProps. If you can explain at a deeper level what exactly mapStateToProps and mapDispatchToProps are doing and how they are different I'll give you the bounty.
Minimum Reproducible Example
I have a mapStateToProps function that looks like
const mapStateToProps = state => {
return {
firstName: state.firstName,
middleName: state.middleName,
lastName: state.lastName,
}
}
const ReduxTabForm = connect(mapStateToProps)(MyTab)
In my MyTab component I have a button that is supposed to be inactive if these 2 field do not have anything entered in, but the state of whether or not the button is disabled does not change
function App() {
const {firstName, lastName} = store.getState().formData
const isDisabled = () => {
const {firstName, lastName} = store.getState().form
const requiredFields = [firstName, lastName]
alert(requiredFields)
for(let i = 0; i < requiredFields.length; i=i+1){
if (!requiredFields[i]){
return true
}
}
return false
}
return (
<div className="App">
<div className='bg-light rounded'>
<div className='px-sm-5 pt-0 px-4 flexCenterCol mx-5'>
<div>
<input
type='text'
className="form-control"
value={store.getState().formData['firstName']}
placeholder="First Name"
onChange={(e) => {
store.dispatch(setFormData({'firstName': e.target.value}))
}}
></input>
<input
type='text'
className="form-control"
value={store.getState().formData['lastName']}
placeholder="Last Name"
onChange={(e) => {
store.dispatch(setFormData({'lastName': e.target.value}))
}}
></input>
</div>
<button
type="submit"
disabled={isDisabled()}
>
Button
</button>
</div>
</div>
</div>
)
}
That alert statement executes on page refresh, but does not execute any time after that when I enter data in. I have checked that the redux state updating and it is. The button will not update though, and the isDisabled function will not run more than once
I looked at your reducer code and it looks like this:
...
const reducer = combineReducers({
formData: formReducer,
})
export default reducer
Which means your redux state structure is like this:
state = {
formData: {
firstName: <value>,
middleName: <value>,
lastName: <value>,
}
}
Solution
So, to make your component re-render when the redux state is changed, you need to subscribe to the correct state variables in your mapStateToProps function. Change it to this and will work:
const mapStateToProps = state => {
return {
firstName: state.formData.firstName, // Note that I added "formData"
middleName: state.formData.middleName,
lastName: state.formData.lastName
}
}
Couple of side notes:
It's a better to use the props instead of directly accessing the redux store.
For debugging, console.log is preferred over alert. React DevTools and Redux DevTools are even better.
I don`t know if this will solve your problems, but maybe it is one of the things below:
1 - As Mohammad Faisal said the correct form of calling props should be
const { firstName, lastName } = props;
2 - Instead of reduxTabForm, maybe you could use this instead:
export default connect(mapStateToProps)(MyTab);
3 - And finally, maybe it is an error in the "isDisabled":
for(let i = 0; i < requiredFields.length; i=i+1){
if (!requiredFields){
return false
}
}
If you look carefully, you can see that you are not checking if there is an error inside requeiredFields, your are looking if that doesnt exist if (!requiredFields), maybe changing the condition to if(!requiredFields[i]) so it check each variable and not if the array doesn`t exists.
Edit: the return condition is correct? Returning False when something doesn`t exists?
const ReduxTabForm = connect(mapStateToProps,null)(MyTab)
Try this code snippet, as you are not passing dispatch function to your component. It is better to pass null value.
mapdispatchtoProps is the same basic theory of mapStateToProps.You are storing the function inside the store(which usually in actions) and when rendering the component you attach those function in store to your props. After rendering the component you will be able to run the functions which are in store.
your state values are passed to your component as props. so if you want to access them inside component you should do something like this
const {firstName, lastName} = props
What you could do is something like:
<button
type="submit"
disabled={!fistname && !lastname}
/>
this way if any of your fields be falsy, button is disabled. (empty string is falsy)
The React redux documentation also explains mapDispatchToProps
If you call your action called setFormData from your redux/actions.js then you will be mapping the action setFormData (which is an object) to your component. The action setFromData replace mapDispatchToProps. This is what the documentation says about mapping actions to your components
If it’s an object full of action creators, each action creator will be
turned into a prop function that automatically dispatches its action
when called.
To fix your problem, change your connect function call to this.
const ReduxApp = connect(
setFormData,
mapStateToProps
)(App)
Your issues is with this code isDisabled()
const isDisabled = () => {
const {firstName, lastName} = store.getState().form
const requiredFields = [firstName, lastName]
alert(requiredFields)
for(let i = 0; i < requiredFields.length; i=i+1){
if (!requiredFields){
return false
}
}
return true
}
You are trying to test in loop !requiredFields, an array you created which always return false, even if it doesn't have values. It's a reference type. What you can do now is
const isDisabled = () => {
const {firstName, lastName} = store.getState().form
const requiredFields = [firstName, lastName]
alert(requiredFields)
for(let i = 0; i < requiredFields.length; i=i+1){
if (!requiredFields[i]){
return false
}
}
return true
}
Your loop will check firstNAme and LastName values if they are undefined or not and test should respond with this.
The problem is in the mapStateToProps method. Your code is setting firstNAme and lastName as formData within state object and you are trying to access it from state object directly.
This codesandbox has your project updated with the fix. I didn't fix any other thing in your code so everything is as it is only mapStateToProps should be:
const mapStateToProps = (state) => {
return {
firstName: state.formData["firstName"],
middleName: state.middleName,
lastName: state.formData["lastName"]
};
};
and this will fix your issue. mapStateToPropsis kind of a projection function which will project entire store to some object which will only have properties based on requirements of your component.
Redux re-render components only when store state changes. Check if you are only updating store's state property not whole state because redux compare state by comparing their references, so if you are doing something like this inside your reducer:
State.firstName = action.payload.firstName;
return State;
Then change this to this:
return {...State, firstName: action.payload.firstName}
Note: If you unable to grasp that then kindly provide your reducer code too so that I can see how you are updating your store state.
Looking at your MRE on GitHub, the first thing I want to say is that your button will only have one state and it is the one that the isDisabled() method returns when you refresh the page. This is because the App component it's not getting refresh every time you write on the input fields, so you will never be able to make it change.
you need to subscribe to the correct state variables in your mapStateToProps function. Like this:
const mapStateToProps = state => {
return {
firstName: state.formData.firstName,
middleName: state.formData.middleName,
lastName: state.formData.lastName
}
}
So now that you have this right, you have to introduce this props into your component, like this:
function App({firstName, lastName}) { ...
Another thing to add, is that your are not initializing the states when you create your reducer in reducer.js. If you don't do this, your initial states for firstName and lastName will be null. Here is how you should do it:
import {combineReducers} from 'redux'
import {SET_FORM_DATA} from './actions'
const initialState = {
firstName: "",
lastName: ""
}
const formReducer = (state = initialState, action) => {
if (action.type === SET_FORM_DATA){
return {
...state,
...action.payload
}
}else{
return state
}
}
const reducer = combineReducers({
formData: formReducer,
})
export default reducer
Finally you have to update App:
function App({firstName, lastName}) {
return (
<div className="App">
<div className='bg-light rounded'>
<div className='px-sm-5 pt-0 px-4 flexCenterCol mx-5'>
<div>
<input
type='text'
className="form-control"
placeholder="First Name"
onChange={(e) => {
store.dispatch(setFormData({'firstName': e.target.value}));
console.log(firstName === "h");
}}
></input>
<input
type='text'
className="form-control"
placeholder="Last Name"
onChange={(e) => {
store.dispatch(setFormData({'lastName': e.target.value}))
alert(JSON.stringify(store.getState()))
}}
></input>
</div>
<button
type="submit"
disabled={firstName == "" || lastName == ""}
>
Button
</button>
</div>
</div>
</div>
);
}
So in this way you will be able to update the states from your store and have the dynamic behavior that you were looking for.
In isDisabled function you read data from form: const {firstName, lastName} = store.getState().form but I guess they are saved to formData.
Changing const {firstName, lastName} = store.getState().form to const {firstName, lastName} = store.getState().formData should help.
I am currently building a multi-step form during a user onboarding process, which is why I need to centralize all form data in a parent React component state.
I need to update initialValues with user information but this is an async process.
I thought of creating a useEffect hook calling setState, but maybe there is a more elegant way of doing so...
Having initialValues as one of useEffect dependencies seems to create an infinite loop (Maximum update depth exceeded). This is why the working solution I found was to duplicate all initialValues within... 😒
So how could I update only specific values from initialValues after getting async user information?
Here is a simplified version of the implementation:
import React, { useState, useEffect } from 'react'
// Auth0 hook for authentication (via React Context).
import { useAuth0 } from '../../contexts/auth/auth'
import { Formik, Form, Field } from 'formik'
export default () => {
const { user } = useAuth0()
const initialValues = {
profile: {
name: '',
address: '',
// Other properties...
},
personalInfo: {
gender: '',
birthday: '',
// Other properties...
},
}
const [formData, setFormData] = useState(initialValues)
const [step, setStep] = useState(1)
const nextStep = () => setStep((prev) => prev + 1)
useEffect(() => {
const updateInitialValues = (user) => {
if (user) {
const { name = '', gender = '' } = user
const updatedInitialValues = {
profile: {
name: name,
// All other properties duplicated?
},
personalInfo: {
gender: gender,
// All other properties duplicated?
},
}
setFormData(updatedInitialValues)
}
}
updateInitialValues(user)
}, [user, setFormData])
switch (step) {
case 1:
return (
<Formik
enableReinitialize={true}
initialValues={formData}
onSubmit={(values) => {
setFormData(values)
nextStep()
}}
>
<Form>
<Field name="profile.name" type="text" />
<Field name="profile.address" type="text" />
{/* Other fields */}
<button type="submit">Submit</button>
</Form>
</Formik>
)
case 2:
return (
<Formik
enableReinitialize={true}
initialValues={formData}
onSubmit={(values) => {
setFormData(values)
nextStep()
}}
>
<Form>
<Field name="personalInfo.gender" type="text" />
<Field name="personalInfo.birthday" type="text" />
{/* Other fields */}
<button type="submit">Submit</button>
</Form>
</Formik>
)
// Other cases...
default:
return <div>...</div>
}
}
it's probably late for me to see this question and I just happen to work on a similar project recently.
For my use case, I'm using only one Formik, and using theory similar to Formik Multistep form Wizard: https://github.com/formium/formik/blob/master/examples/MultistepWizard.js for my multistep forms.
And on each step, I need to fetch API to prefill data, I also use useEffect but since I just call the API onetime when I load the specific step, I force it to behave the same as ComponentDidMount(), which is to leave the [] empty with the comment // eslint-disable-next-line so it won't give me warning.
And I use setFieldValue in the useEffect after data is successfully loaded. I feel mine is also not a good way to handle this situation, and I just found something that might be useful: https://github.com/talor-hammond/formik-react-hooks-multi-step-form, it has a Dynamic initialValues. (Though it's typescript)
I am going to refer to this and also try to use for each of my steps, and probably use Context or Wrap them in a parent and store data in the parent Formik.
And getting infinite loop for you might because setFormData should not be in the dependency, since when you setState, the component re-render, the useEffect calls again.
Not sure if this can help you or you already find out how to implement it, I'll look into this deeper.