Unfortunately I didn't understand logic of input checkbox in render. Here is the problem:
1) I have input type checkbox with onChange and checked attributes on it;
2) Also I have button handleSearch which gets API information from backend after clicking the button;
3) If I will click on checkbox it will also receive information from API(from same API as in second step with same parameters).
Problem is: If I will click checkbox it will send falsy parameter of checkbox because, as I understand, it is working vice-versa for some reason. But, if I will try to first click button it will work OK.
So I need to send truthy parameter on handling checbox.
input in render():
<input
type="checkbox"
className="custom-control-input"
name="grouping"
id="updateprice"
checked={grouping}
onChange={this.onGroupingChange}
/>
checkbox handler():
onGroupingChange = (e) => {
const {grouping} = this.state;
this.setState({ grouping: e.target.checked});
this.getSales(grouping);
};
OnClick handler():
handleSearch = () => {
const { grouping } = this.state;
this.setState({ isLoading: true });
this.getSales(grouping);
};
getSales()
getSales = (grouping) => {
let notattr;
if (grouping===false){
notattr=1
}
else notattr = 0
this.setState({isLoading: true})
Axios.get('/api/report/sales', {
params: { notattr }
})
.then(res => res.data)
.then((sales) => {
this.setState({
sales,
isLoading: false,
handleGrouping: true,
activePage: 1,
currentRange: {
first: (this.state.itemsPerPage) - this.state.itemsPerPage,
last: (this.state.itemsPerPage) - 1
},
orderBy: ''
})
})
.catch((err) => {
this.setState({isLoading: false})
console.log(err)
})
};
basic problem scenario 1:
1) I'm opening page;
- checkbox in screen true;
2) I'm clicking search button;
- API sends noattr:0 because grouping:true;
3) Now, I want to click checkbox;
- API still sends noattr:0 because grouping:true(but I was expecting grouping:false value)
4) If I will handle checkbox later it will work vice-versa. But if I will handle search button, it will send OK information.
Obviously there is small mistake somewhere, but I tried a lot of different combinations and it seems that didn't find right one.
onGroupingChange = (e) => {
const {grouping} = this.state;
this.setState({ grouping: e.target.checked});
this.getSales(grouping);
};
I think you should call like this:
this.getSales(e.target.checked)
You're calling getSales function with previous value, not updated value.
Related
I am using react-native-searchable-dropdown for my react native project.
When onTextChange is fired I make a call to my backend with the text the user inputs.
Then I set the data I get back (array of objects) in the state:
async inputBrandText (text) {
const brands = await SearchForBrands(params);
this.setState((state) => {
return state.brands = brands
})
};
In the items element I reference this state array:
<SearchableDropdown
textInputProps={
{
placeholder: "",
underlineColorAndroid: "transparent",
style: {
...
},
onTextChange: text => this.inputBrandText(text)
}
}
items={this.state.brands}
/>
But the items get refreshed one key stroke after it should actually be refreshed.
So I think when the onTextChange event is fired, the items object or array is read in.
Then I change the this.state.brands object with the data from the backend.
But then no update occurs and the items object is not updated. Therefor the old items object is shown.
How can I solve this problem in a class based component?
Thanks!
PS: This is my ComponendDidMount:
async componentDidMount () {
const brands = await SearchForBrands(params);
this.setState((state) => {
return state.showBrandSuggestions = brands
})
}
Try this way
Your componentDidMount method should be like
async componentDidMount () {
const brands = await SearchForBrands(params);
this.setState({ showBrandSuggestions: brands });
}
Your inputBrandText method should be like
async inputBrandText (text) {
const brands = await SearchForBrands(params);
this.setState({ brands: brands });
};
I am currently building a clothing shop in which you can add products to the cart, and delete each one of them as you like and it makes the cart re-render and display a new cart without that product within it.
so I've made a Slice for cart in redux. the 'addProduct' part works fine, but the 'deleteProduct' reducer which uses filter() doesn't work. (when i click my delete button nothing happens, and no changes in difference in Redux Devtools)
my slice:
const selectedProductsSlice = createSlice({
name:'selectedProducts',
initialState:{
productList:[],
checkoutPrice:0,
},
reducers: {
addProduct:(state,{payload}) => {
state.productList.push(payload)
state.checkoutPrice += payload.price
},
deleteProduct:(state,{payload}) => {
state.productList.filter((foundProduct) => foundProduct.id !== payload.id)
}
}});
my button and handleDelete:
<button className="btn-delete" onClick={handleDelete(product)}>Delete</button>
function handleDelete(p) {
console.log(p)
dispatch(deleteProduct(p.product))
}
edit:
filter didnt work in every possible way i tried. so i changed my way and did this instead to work. but still i wonder why didnt filter() method work properly.
deleteProduct: (state, { payload }) => {
const foundIndex = state.productList.findIndex((p) => {
return p.product.id === payload.id
})
state.productList.splice(foundIndex,1)
}
The filter operation creates a new array without changing the existing instance. Therefore you need to assign it to state.
deleteProduct: (state, { payload }) => {
return {
...state,
productList: state.productList.filter(
foundProduct => foundProduct.id !== payload.id
)
};
};
You also need to change the way you call the handleDelete in the onClick handler.
onClick={() => handleDelete(product)}
Filter methods returns new array so you have to update your existing array tool. Please update your slice:
const selectedProductsSlice = createSlice({
name:'selectedProducts',
initialState:{
productList:[],
checkoutPrice:0,
},
reducers: {
addProduct:(state,{payload}) => {
state.productList.push(payload)
state.checkoutPrice += payload.price
},
deleteProduct:(state,{payload}) => {
state.productList=state.productList.filter((foundProduct) => foundProduct.id !== payload.id)
}
}});
I went through exactly same problem as you.
I solved this problem just to move my reducer to another existing reducer
Hope you to get through it. I couldn't pass it by
I got a situation where I do not have the experience to know which method is the best and what im doing wrong. The situation is as following:
I got a page with products which have a input + order button, which will add the order to the shoppingcart. My thought was to first set the state for each order you make:
const [amountItem, setAmountItem] = useState({
product: {
id: '',
amount: ''
}
});
Updating:
function handleChange(evt, id) {
const value = evt.currentTarget.value;
setAmountItem({
...amountItem,
product:{
id: id,
amount: value
}
});
console.log(amountItem);
}
Which then I push to the shoppingcart/checkout page (no modal):
if (e.target[0].value < productItem.stock) {
history.push({
pathname: `/winkelwagen/`,
state: {data: amountItem}
});
On this page, i first check if location.state exists before using the shoppingcart component:
if (location.state !== null && shoppingCartItems === '') {
console.log(location.state.data);
setShoppingCartItems(location.state.data);
setShoppingCartActive(true);
let cartString = JSON.stringify(shoppingCartItems);
localStorage.setItem('shopping_carts', cartString)
}
When it does exist, some product is ordered with an amount and must be set to localstorage, the product is 'always' visible when refreshing, etc. Until this point it works, the localstorage item exists:
(key)shopping_carts (value){"product":{"id":3,"amount":"2"}}
After that comes the shoppingcart component:
<ShoppingCart
shoppingCartItems={shoppingCartItems}
setShoppingCartItems={setShoppingCartItems}
shoppingCartActive={shoppingCartActive}
setShoppingCartActive={setShoppingCartActive}
/>
This is where my problem starts. Long story short, it only shows the single item from the state, which obviously will be gone.
In this file I got a useEffect part for the localstorage:
useEffect(() =>{
let shoppingCart = localStorage.getItem("shopping_carts");
console.log('shoppingcartitems ');
shoppingCart = JSON.parse(shoppingCart);
console.log(shoppingCart);
if (shoppingCart !== "") {
const id = shoppingCartItems.id;
const amount = shoppingCartItems.amount;
//setShoppingCartItems(shoppingCart)
setShoppingCartItems(prevState => ({
...prevState,
product: {
...shoppingCartItems,
id: id,
amount: amount
}
}))
}
}, [setShoppingCartItems])
The output for 'shoppingCart' is <empty string>. Why is that? Is the format wrong? I'm also using the localstorage for other info, which works fine. I know the setShoppingCartItems is not correct for multiple values, but I wanted to test this single entry first.
Update:
const CheckoutPage = () => {
const location = useLocation();
const [shoppingCartItems, setShoppingCartItems] = useState('');
const [shoppingCartActive, setShoppingCartActive] = useState(false);
const [mode, setMode] = useState('init');
let savedShoppingCart = JSON.parse(localStorage.getItem("shopping_carts"));
console.log('saved shopping cart: ')
console.log(savedShoppingCart);
if (savedShoppingCart !== "" && mode === 'init') {
const id = savedShoppingCart.id;
const amount = savedShoppingCart.amount;
//setShoppingCartItems(shoppingCart)
setShoppingCartItems(prevState => ({
...prevState,
product: {
...shoppingCartItems,
id: id,
amount: amount
}
}))
setMode('data');
//setShoppingCartActive(true);
}
if (location.state !== null && shoppingCartItems === '') {
console.log(location.state.data);
setShoppingCartItems(location.state.data);
setShoppingCartActive(true);
let cartString = JSON.stringify(shoppingCartItems);
localStorage.setItem('shopping_carts', cartString)
}
return (
<div className="shoppingCartPage">
<ShoppingCart
shoppingCartItems={shoppingCartItems}
setShoppingCartItems={setShoppingCartItems}
shoppingCartActive={shoppingCartActive}
setShoppingCartActive={setShoppingCartActive}
/>
</div>
)
}
So basically I want to do 3 things here:
Get the data from the localstorage item
Is there a saved localstorage item? Add it to existing shoppingCartItems (prevstate)
Save the updated (or new when no localstorage item exists) shoppingCartItems after that
After that I want to pass the data to the shoppingcart where i can increase/decrease items or remove/splice the values.
Treat useEffect with caution as an eventListener on React state.
Therefore you need to specify in the dependency array everything might change, in order to trigger the useEffect callback.
In your useEffect dependencies, where you are updating your shoppingCartItems, you have added only setShoppingCartItems - which I assume that its a setState function. This results in your useEffect te be called only once at the app start because setState functions never change.
So, to have your shoppingCartItems updated via useEffect you need to add it to dependencies.
useEffect(() => {
// your code
}, [setShoppingCartItems, shoppingCartItems])
This may fix your problem, because you never call logic that saves update shopping cart state, the second time, therefore you get empty in your console log.
I have react js and asp.net core application, onform submit i am trying to fill some master data and detail data(with in aray).
The problem is that, setState updates one previous value and my backend asp.net web api method gets hit when i press submit button twice. anyone can please tell me what is the proper way to update state so that i could submit correct data on first hit. I am calling another function addDetailItem from handleSubmit function to fill array using setState hook.
<form autoComplete="off" noValidate onSubmit = {handleSubmit} >
const handleSubmit = (e) => {
e.preventDefault();
if(validateForm()){
addDetailItem();
props.createPaymentVoucher(values);
}
console.log(values);
}
const addDetailItem = () => {
let x = {
voucherMasterId:values.voucherMasterId,
voucherDetailId:0,
accountCode: values.creditAccountCode,
debit: 0,
credit: values.creditAmount,
remarks: values.fromRemarks,
status: ""
}
setValues({
...values,
voucherDetails: [...values.voucherDetails, x]
});
console.log('voucherDetails: ', values.voucherDetails);
}
here setValues setting the values but on first click it shows empty array and on second click it shows values which had to filled first time.
Solution
Just capture values changes using useEffect
I passed the values as dependency in useEffect.
So, You will get the latest updated value of values
Now everytime anything changes in values, it will call props.createPaymentVoucher
useEffect(() => {
props.createPaymentVoucher(values);
}, [values])
const handleSubmit = (e) => {
e.preventDefault();
if(validateForm()){
addDetailItem();
}
}
const addDetailItem = () => {
let x = {
voucherMasterId:values.voucherMasterId,
voucherDetailId:0,
accountCode: values.creditAccountCode,
debit: 0,
credit: values.creditAmount,
remarks: values.fromRemarks,
status: ""
}
setValues({
...values,
voucherDetails: [...values.voucherDetails, x]
});
}
setState is async function so when you try to use state immediately after updating it, it will always return previous value.
So instead of using state value immediately, you can use useEffect or either follow below solution for your specific use case.
Try:-
const newValues = { ...values, voucherDetails: [...values.voucherDetails, x]};
setValues({ ...newValues });
return newValues;
Now you can access your values in your handleSubmit function like below
const updatedValues = addDetailItem();
With a checkbox onChange event, how do I remove value from state array when unchecked in react?
State array:
this.state = { value: [] }
onChange function:
handleChange = event => {
if (event.target.checked) {
this.setState({
value: [...this.state.value, event.target.value]
});
} else {
this.setState({
value: [this.state.value.filter(element => element !== event.target.value)]
});
}
};
Not sure exactly what the .filter() should be doing
You're very close, except:
You need to remove the [] around your call to filter. filter returns an array. If you wrap that in [], you're putting the array inside another array, which you don't want (in this case).
and
Since you're updating state based on existing state, it's important to use the callback version of setState, not the version that directly accepts an object. State updates can be batched together, so you need to be sure you're dealing with the most recent version of the array.
So:
handleChange = ({target: {checked, value: checkValue}}) => {
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// ^− destructuring to take the properties from the event,
// since the event object will get reused and we're doing
// something asynchronous below
if (checked) {
this.setState(({value}) => ({value: [...value, checkValue]}));
} else {
this.setState(({value}) => ({value: value.filter(e => e !== checkValue)}));
// ^−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^−−− No [] around this
}
};
There are some situations where you'd get away with using this.state.value instead of using the callback (for instance, if you only update value in response to certain events), but you have to be sure you know which ones they are; it's simpler just to use the callback.
FWIW, since it has multiple values in it, if it were me I'd call the state property values (plural) rather than value, which would also mean we didn't have to rename the value from the event target in the destructuring above:
handleChange = ({target: {checked, value}}) => {
if (checked) {
this.setState(({values}) => ({values: [...values, value]}));
} else {
this.setState(({values}) => ({values: values.filter(e => e !== value)}));
}
};