React : Empty values on PUT for axios - javascript

I have a simple list that I get from an API using axios.
Every element is a modifiable input, with it own update button.
After changing the data of an input, and while performing PUT request, console.log(test); returns empty values.
I checked console.log(newList); which is the array of the list, and the changing data are indeed happening in the list, but it seems they can't be sent to the server.
Note : The API is just for testing, the PUT method may not work, but atleast the values in the console should be sent.
Note2 : I don't know how to place the id of an item of the list in the url so you may encounter an error. / You can try with 1,2 or 3 instead for testing.
https://codesandbox.io/s/quizzical-snowflake-dw1xr?file=/src/App.js:1809-1834
import React, { useState, useEffect } from "react";
import axios from "axios";
export default () => {
const [list, setList] = React.useState([]);
const [name, setName] = React.useState("");
const [description, setDescription] = React.useState("");
const [city, setCity] = React.useState("");
// Getting initial list from API
useEffect(() => {
axios
.get("https://6092374385ff5100172122c8.mockapi.io/api/test/users")
.then((response) => {
setList(response.data);
console.log(response);
})
.catch((err) => console.log(err));
}, []);
// onUpdate to update the data in the API
const onUpdate = (e) => {
e.preventDefault();
const test = {
name: name,
description: description,
city: city
};
console.log(test);
// axios request PUT data on API
axios
.put(
"https://6092374385ff5100172122c8.mockapi.io/api/test/users" + id,
test
)
.then((res) => {
alert("success");
console.log(res);
})
.catch((error) => {
console.log(error);
});
// axios request GET to get the new modified list from the database, after the update
axios
.get("https://6092374385ff5100172122c8.mockapi.io/api/test/users")
.then((res) => {
alert("success");
console.log(res);
})
.catch((error) => {
console.log(error);
});
};
// Handler for changing values of each input
function handleChangeUpdate(id, event) {
const { name, value } = event.target;
const newList = list.map((item) => {
if (item.id === id) {
const updatedItem = {
...item,
[name]: value
};
return updatedItem;
}
return item;
});
setList(newList);
console.log(newList);
}
return (
<div>
<ul>
<div>
{list.map((item) => (
<li key={item.id}>
<input
className="form-control"
name="name"
onChange={(event) => handleChangeUpdate(item.id, event)}
defaultValue={item.name}
></input>
<input
className="form-control"
name="description"
onChange={(event) => handleChangeUpdate(item.id, event)}
defaultValue={item.description}
></input>
<input
className="form-control"
name="city"
onChange={(event) => handleChangeUpdate(item.id, event)}
defaultValue={item.city}
></input>
<button onClick={onUpdate}>Update</button>
</li>
))}
</div>
</ul>
</div>
);
};

It's because you never set the values of the props. That is why they never change from their initial values. You just update the list prop in handleChangeUpdate. There are two steps you need to take with the existing file structure:
Make handleChangeUpdate be able to differentiate between different props (city, description, etc.). For example, by passing the prop's name.
Update the prop's value in the handleChangeUpdate.
To realize the first step, you can change the input tag like the following:
{/* attention to the first argument of handleChangeUpdate */}
<input
className="form-control"
name="name"
onChange={(event) => handleChangeUpdate("name", item.id, event)}
defaultValue={item.name}
></input>
Then, you need to adjust the handleChangeUpdate:
if (name === "name") {
setName(value);
} else if (name === "description") {
setDescription(value);
} else if (name === "city") {
setCity(value);
}
By the way, list is not a good name for a variable.
Alternatively
Without creating new parameters, you can also use only the event to set the props
// Handler for changing values of each input
function handleChangeUpdate(id, event) {
const { name, value } = event.target;
const newList = list.map((item) => {
if (item.id === id) {
const updatedItem = {
...item,
[name]: value
};
return updatedItem;
}
return item;
});
setList(newList);
console.log(newList);
if (name === "name") {
setName(value);
} else if (name === "description") {
setDescription(value);
} else if (name === "city") {
setCity(value);
}
}

I think you have 3 errors in the onUpdate function.
You are not passing the id of the item from the onClick event
Your put method should be change
You should not perform get request as soon as after the put request, because sometimes the backend will not updated yet.
You can update your code as below,
1.Pass the id of the item when the button is clicked.
<button onClick={onUpdate(item.id)}>Update</button>
Modify the put method, passing the id
axios
.put(
`https://6092374385ff5100172122c8.mockapi.io/api/test/users/${e}`,
test
).then((res) => {
alert("success");
console.log(res);
})
.catch((error) => {
console.log(error);
});
3.Perform the get request after the response of the put request
const onUpdate = (e) => {
const test = {
name: name,
description: description,
city: city
};
console.log(test);
// axios request PUT data on API
axios
.put(
`https://6092374385ff5100172122c8.mockapi.io/api/test/users/${e}`,
test
)
.then((res) => {
console.log(res);
// axios request GET to get the new modified list from the database, after the update
axios
.get("https://6092374385ff5100172122c8.mockapi.io/api/test/users")
.then((res) => {
alert("success");
console.log(res);
})
.catch((error) => {
console.log(error);
});
})
.catch((error) => {
console.log(error);
});
};

Related

How can I prevent states from resetting after a http request?

when I send the server an HTTP request ( patch request in the checkbox onChange function) and update the state other states will be deleted until I reload the page and they will be back
so how can I update the states without losing the others?
I'm not totally sure but I think the problem is where I'm updating the state with the response I get from the server I think I'm not updating the state and I'm just adding the new response to it and replacing the others
here's my code
const Form = () => {
const [todos, setTodos] = React.useState([]);
const debounce = (func, timeout = 350) => {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args);
}, timeout);
};
};
const saveInput = (e, id) => {
const x = !e.target.checked;
console.log(x);
axios
.patch(`http://127.0.0.1:8000/todo/todos/${id}/`, {
completed: x,
})
.then(
(response) => {
console.log(response.data);
setTodos([response.data]);
},
(error) => {
console.log(error);
}
);
};
const processChange = debounce((e, id) => saveInput(e, id));
useEffect(() => {
axios.get("http://127.0.0.1:8000/todo/todos/").then((response) => {
setTodos(response.data);
});
}, []);
return (
<form>
<h1>Todo list</h1>
<button>Add</button>
<div>
{todos.map((todo) => (
<ul key={todo.id}>
<li>{todo.title}</li>
<li>{todo.description}</li>
<button onClick={() => deleteHandler(todo.id)}>delete</button>
<input
type="checkbox"
placeholder="completed"
onChange={(e) => processChange(e, todo.id)}
checked={todo.completed}
/>
</ul>
))}
</div>
</form>
);
};
export default Form;
Inside your saveInput function you are resetting your todos with the new response data. Thus you are losing the data from your component initialization. What you need to do is to destructure your existing data and add them with your new payload.
You can either do this:
setTodos([...todos, response.data]);
Or this:
setTodos((prevState) => ([...prevState, response.data]))
The second option is the best practice as this returns your state correctly.
Hope this helps.
Try This.
const saveInput = (e, id) => {
const x = !e.target.checked;
console.log(x);
const newTodos = [...todos];
const filteredTodos = newTodos.filter(todo => todo.id !== id);
axios
.patch(`http://127.0.0.1:8000/todo/todos/${id}/`, {
completed: x,
})
.then(
(response) => {
console.log(response.data);
filteredTodos.push(response.data);
setTodos(filteredTodos);
},
(error) => {
console.log(error);
}
);
};
So Morteza's answer worked but it had a tiny problem which was when i updated the state the order of the state ( array ) would change because of .push() method which pushes the item to the last index
here is the solution which works fine and won't change the orders:
setTodos(val => val.map(item => item.id === response.data.id ? (response.data) : item));
It's getting the todos current state, mapping and checking if each of its item.id is equal to the item.id from the server and if it is, then replaced and updated with a response.data, if not then nothing changes.

Reactjs variable is returning with undefined after useEffect

I am very new to Reactjs, I am working on retrieving some data in order to display it, everything gets displayed however, when I filter there is an error that comes up "Cannot read property 'filter' of undefined", after debugging I found out that dataList is returning with undefined when typing anything in the search bar.
Appreciate your assistance.
function App() {
var dataList;
useEffect(() => {
// http get request
const headers = {
'Content-Type': 'application/json',
'Authorization': '***********************',
'UserAddressId': ****,
'StoreId': *
}
axios.get('https://app.markitworld.com/api/v2/user/products', {
headers: headers
})
.then((response) => {
dataList = response.data.data.products
setData(dataList)
})
.catch((error) => {
console.log(error)
})
}, []);
const [searchText, setSearchText] = useState([]);
const [data, setData] = useState(dataList);
// exclude column list from filter
const excludeColumns = ["id"];
// handle change event of search input
const handleChange = value => {
setSearchText(value);
filterData(value);
};
// filter records by search text
const filterData = (value) => {
console.log("dataList", dataList)
const lowercasedValue = value.toLowerCase().trim();
if (lowercasedValue === "") setData(dataList);
else {
const filteredData = dataList.filter(item => {
return Object.keys(item).some(key =>
excludeColumns.includes(key) ? false :
item[key].toString().toLowerCase().includes(lowercasedValue)
);
});
setData(filteredData);
}
}
return (
<div className="App">
Search: <input
style={{ marginLeft: 5 }}
type="text"
placeholder="Type to search..."
value={searchText}
onChange={e => handleChange(e.target.value)}
/>
<div className="box-container">
{data && data.length > 0 ? data.map((d, i) => {
return <div key={i} className="box">
<b>Title: </b>{d.title}<br />
<b>Brand Name: </b>{d.brand_name}<br />
<b>Price: </b>{d.price}<br />
<b>Status: </b>{d.status}<br />
</div>
}) : "Loading..."}
<div className="clearboth"></div>
{data && data.length === 0 && <span>No records found to display!</span>}
</div>
</div>
);
}
export default App;
You're mixing up a stateful data variable with a separate non-stateful, local dataList variable. The dataList only gets assigned to inside the axios.get, so it's not defined on subsequent renders; the setData(dataList) puts it into the stateful data, but the dataList on subsequent renders remains undefined.
To make things easier to understand, remove the dataList variable entirely, and just use the stateful data.
You also probably don't want to discard the existing data when the user types something in - instead, figure out what items should be displayed while rendering; rework the filterData so that its logic is only carried out while returning the JSX.
const [searchText, setSearchText] = useState([]);
const [data, setData] = useState([]);
useEffect(() => {
// http get request
const headers = {
'Content-Type': 'application/json',
'Authorization': '***********************',
'UserAddressId': ****,
'StoreId': *
}
axios.get('https://app.markitworld.com/api/v2/user/products', {
headers: headers
})
.then((response) => {
setData(response.data.data.products);
})
.catch((error) => {
console.log(error)
})
}, []);
// handle change event of search input
const handleChange = value => {
setSearchText(value);
};
// filter records by search text
const filterData = () => {
const lowercasedValue = searchText.toLowerCase().trim();
return lowercasedValue === ""
? data
: data.filter(
item => Object.keys(item).some(
key => excludeColumns.includes(key) ? false :
item[key].toString().toLowerCase().includes(lowercasedValue)
)
);
}
And change
{data && data.length > 0 ? data.map((d, i) => {
to
{filterData().map((d, i) => {
Your searchText should also be text, not an array: this
const [searchText, setSearchText] = useState([]);
should be
const [searchText, setSearchText] = useState('');
First of all, you don't need to maintain an additional non-state variable dataList as the local state data would serve the purpose.
API Call Code:
You should directly store the response from API after null checks satisfy.
useEffect(() => {
const headers = {
// key value pairs go here
};
// http request
axios.get(endPoint, {
headers,
})
.then((response) => {
// set data directly null checks
setData(response.data.data.products);
})
.catch((error) => {
console.log(error);
});
}, []);
Filteration Code
Use useCallback hook which would return a memoized version of the callback, unless the value of data changes.
const filterData = useCallback((value) => {
console.log('data', data);
// rest of code
}, [data]);

Cannot read property 'map' of undefined - Cant map data from axios request

In react, I am trying to fetch data from an API call which I have created. The console prints out the correct response which is list of names of users, but the mapping is not working for me. Any advice would be beneficial.
import React, { useEffect } from "react";
import { useForm } from "react-hook-form";
import axios from "axios";
const CreateProject = () => {
const [loading, setLoading] = React.useState(true);
const { handleSubmit, register, errors } = useForm();
const [value, setValue] = React.useState("Choose option");
const [items, setItems] = React.useState([
{ label: "Loading", value: "Loading" }
]);
const onSubmit = values => {
console.log(values);
};
useEffect(() => {
// initialise as false
let unmounted = false;
async function getUsers() {
const res = await axios.get(
"http://localhost:3000/api/findUser/findUser"
// Api for finding user
);
const body = await res.data;
console.log(res.data);
// check state is still false beofre state is set
if (!unmounted) {
setItems(
body.res.map(({ name }) => ({
label: name,
value: name
}))
);
setLoading(false);
// setLoading allows change to option - data displayed
}
}
getUsers();
return () => {
unmounted = true;
};
}, []);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input
type="text"
placeholder="ProjectName"
name="ProjectName"
ref={register({ required: true, maxLength: 20 })}
/>
<input
type="text"
placeholder="Project Details"
name="Project Detail"
ref={register({ required: true, maxLength: 50 })}
/>
<select
disabled={loading}
value={value}
onChange={e => setValue(e.currentTarget.value)}
>
{items.map(({ label }) => (
<option key={value} value={value}>
{label}
</option>
))}
</select>
{errors.search && <p>No user found</p>}
<input type="submit" />
</form>
);
};
export default CreateProject;
The error I receive is seems to be around the body.res.map at setItems - "Uncaught (in promise) TypeError: Cannot read property 'map' of undefined"
You are actually console logging other variable than what you're mapping over.
If what you're logging is the right thing, your setItems() should be:
setItems(
res.data.map(({ name }) => ({
label: name,
value: name
}))
)
const body = await res.data; There is no reason to write await because res.data is not a promise.
Here's how it should be const body = res.data
And in this block you need to map only body
setItems(
body.map(({ name }) => ({
label: name,
value: name
}))
);
Use promise chaining instead of await to make things smoother
async function getUsers() {
axios.get("http://localhost:3000/api/findUser/findUser")
.then((res) => {
console.log(res.data);
if (!unmounted) {
setItems(
res.data.map(({
name
}) => ({
label: name,
value: name
}))
);
setLoading(false);
// setLoading allows change to option - data displayed
}
})
.catch((error) => console.log(error));
}

react-admin refresh dataGrid by custom form

First, i want to say that i'm beginner in react (and i hate front development but, you know, sometimes we don't choose in the job's life)....
So, i create a custom form with react-admin without use the REST connexion from react-admin (it's a specific form).
After the form's validation, a value named processingStatut of several data change and need to show this new value in the
<List><Datagrid> mapped by react-admin.
So i follow the documentation for create a reducer action for change a boolean value named processingStatut in my dataGrid like this:
epassesReceived.js
export const EPASSES_RECEIVED = 'EPASSES_RECEIVED';
export const epassesReceived = (data) => ({
type: EPASSES_RECEIVED,
payload: { data },
});
my customForm.js
import { epassesReceived as epassesReceivedAction } from './epassesReceived';
handleSubmit(event) {
this.setState({
post: this.post
});
const { fetchJson } = fetchUtils;
const {
showNotification,
history,
push,
epassesReceived,
fetchStart, fetchEnd
} = this.props;
const url = `${API_URL}/ePasses/update`;
const datas = JSON.stringify(this.state);
const options = {
method: 'POST',
body: datas
};
fetchStart();
fetchJson(url, options)
.then( response => epassesReceived(response.json) )
.then(() => {
showNotification('ra.notification.epasseRecorded');
history.goBack();
})
.catch( error => {
console.error(error);
var message = error.message.replace(/ /g, '');
showNotification(`ra.notification.${message}`, 'warning');
})
.finally(fetchEnd);
event.preventDefault();
}
...
const mapStateToProps = state => ({
customReducer: state.customReducer
});
export const EpassesUpdate = connect(mapStateToProps, {
epassesReceived: epassesReceivedAction,
showNotification,
push,fetchStart, fetchEnd
})(translate(withStyles(formStyle)(EpassesUpdateView)));
and in my app.js
import { EPASSES_RECEIVED } from './epassesReceived';
const customReducer = (previousState = 0, { type, payload }) => {
console.log(payload, type);
if (type == EPASSES_RECEIVED) {
// console.log('modif');
// payload.data[0].processingStatut=1; this is the purpose of the script. To show de modification changed after form's validation
return payload;
}
return previousState;
}
and the viewDataGrid.js
<List
classes={props.classes}
{...props}
exporter={exporter}
title='ePass.pageTitle'
perPage={15}
pagination={<PostPagination />}
filters={<EPassFilter businessunit={businessUnit} />}
bulkActions={<EPassBulkActions businessunit={businessUnit} />}
actions={<PostActions businessUnit={businessUnit} />}
>
<Datagrid classes={props.classes}>
{ businessUnit === undefined || !businessUnit.companyName &&
<TextField source="businessUnitName" label="ePass.businessUnitName" />
}
<StateField source="processingStatut" label="" translate={props.translate} />
.....
But in my console log my value doesn't change and i don't now why... Of course it's works if i refresh my web page by F5 because the value is changed in my database. But not in react's dataGrid... I'm lost...
maybe the log output can be helpfull:
We can see the type "EPASSES_RECEIVED" and the data changed
i think your problem comes from your fetch. Try this :
fetch(url, options)
.then( response => response.json() )
.then(data => {
epassesReceived(data);
showNotification('ra.notification.epasseRecorded');
history.goBack();
})
.catch( error => {
console.error(error);
var message = error.message.replace(/ /g, '');
showNotification(`ra.notification.${message}`, 'warning');
})
.finally(fetchEnd);

Chaining Fetch Calls React.js

I'm making an application where I have to grab certain data from the Github API. I need to grab the name, url, language and latest tag. Because the latest tag is in a separate url, I need to make another fetch call there to grab that data.
I'm running into a certain amount of errors.
1st being the typeError cannot read property 'name' of undefined. I'm sure this is from the fetch call to the tag url where there isn't any data. I'm not really sure how to check if it's undefined. I've tried calling checking to see if the typeof data is undefined and so on but still get the error.
2nd problem being my tag url data doesn't show up with the other data. I'm sure I'm chaining the data wrong because when I click the add button it shows up.
Here is my code:
import React, { Component } from 'react'
import './App.css'
class App extends Component {
state = {
searchTerm: '',
repos: [],
favourites: []
}
handleChange = e => {
const { searchTerm } = this.state
this.setState({ searchTerm: e.target.value })
if (searchTerm.split('').length - 1 === 0) {
this.setState({ repos: [] })
}
}
findRepos = () => {
const { searchTerm } = this.state
// First api call here
fetch(`https://api.github.com/search/repositories?q=${searchTerm}&per_page=10&access_token=${process.env.REACT_APP_TOKEN}
`)
.then(res => res.json())
.then(data => {
const repos = data.items.map(item => {
const { id, full_name, html_url, language } = item
const obj = {
id,
full_name,
html_url,
language,
isFavourite: false
}
// Second api call here. I need the data from map to get the tags for the correct repo
fetch(`https://api.github.com/repos/${full_name}/tags`)
.then(res => res.json())
.then(data => {
obj.latest_tag = data[0].name
})
.catch(err => console.log(err))
return obj
})
this.setState({ repos })
})
.catch(err => console.log(err))
}
render() {
const { searchTerm, repos, favourites } = this.state
return (
<div className="App">
<h1>My Github Favorites</h1>
<input
type="text"
placeholder="search for a repo..."
value={searchTerm}
onChange={e => this.handleChange(e)}
onKeyPress={e => e.key === 'Enter' && this.findRepos()}
/>
<button
type="submit"
onClick={this.findRepos}>
Search
</button>
<div className="category-container">
<div className="labels">
<h5>Name</h5>
<h5>Language</h5>
<h5>Latest Tag</h5>
</div>
// Here I list the data
{repos.map(repo => (
<div key={repo.id}>
<a href={repo.html_url}>{repo.full_name}</a>
<p>{repo.language}</p>
{repo.latest_tag ? <p>{repo.latest_tag}</p> : <p>-</p>}
<button onClick={() => this.addToFavs(repo)}>Add</button>
</div>
))}
<h1>Favourites</h1>
{favourites.map(repo => (
<div key={repo.id}>
<a href={repo.html_url}>{repo.full_name}</a>
<p>{repo.language}</p>
<p>{repo.latest_tag}</p>
<button>Remove</button>
</div>
))}
</div>
</div>
)
}
}
export default App
If you use Promise.all(), you could rewrite your code like the following.
findRepos = () => {
const { searchTerm } = this.state;
// First api call here
const first = fetch(
`https://api.github.com/search/repositories?q=${searchTerm}&per_page=10&access_token=${
process.env.REACT_APP_TOKEN
}`
);
// Second api call here. I need the data from map to get the tags for the correct repo
const second = fetch(`https://api.github.com/repos/${full_name}/tags`);
Promise.all([first, second])
.then((res) => Promise.all(res.map(r => r.json())))
.then([data1, data2] => {
data1.then((firstData) => {
/*Do something you want for first.*/
});
data2.then((secondData) => {
/*Do something you want for second.*/
});
})
.catch((err) => console.log(err));
};
Hope this works for you.

Categories