admin管理员组文章数量:1026989
I'm trying to change state, with values from array. Example:
const [state, setState] = useState({});
const test = [1, 2, 3];
test.map((item, i) => {
setState({ ...state, [`item-${i}`]: item });
});
Current state is:
item-2: 3
What I want to achieve is:
item-0: 1,
item-1: 2,
item-2: 3
I've tried to do it in several ways (all looking similar), but the effect is the same :/ does anyone knows how to resolve it?
Thanks!
I'm trying to change state, with values from array. Example:
const [state, setState] = useState({});
const test = [1, 2, 3];
test.map((item, i) => {
setState({ ...state, [`item-${i}`]: item });
});
Current state is:
item-2: 3
What I want to achieve is:
item-0: 1,
item-1: 2,
item-2: 3
I've tried to do it in several ways (all looking similar), but the effect is the same :/ does anyone knows how to resolve it?
Thanks!
Share edited Mar 16, 2020 at 16:52 skyboyer 23.8k7 gold badges62 silver badges71 bronze badges asked Mar 16, 2020 at 15:56 Ola KoziołOla Kozioł 954 silver badges10 bronze badges 2-
Don't set state in a loop.
const newState = { ...oldState }; test.forEach((item, i) => newState['item-' + i] = item); setState(newState);– Jared Smith Commented Mar 16, 2020 at 16:01 -
I hope your example is more plicated than an object filled with keys of
item-N, because you're essentially duplicating the functionality of an array :) – Dan Commented Mar 16, 2020 at 16:16
2 Answers
Reset to default 5You can update the state using forEach() method like:
test.forEach((item, i) => {
setState(state => ({...state, [`item-${i}`]: item}));
});
You can use the functional version of set state and a reduce to acplish this:
setState(prevState => {
return test.reduce((acc, next, i) => {
return {
...acc,
[`item-${i}`]: next
},
}, prevState);
});
This has the advantage of doing it in a single call and is easier to read.
I'm trying to change state, with values from array. Example:
const [state, setState] = useState({});
const test = [1, 2, 3];
test.map((item, i) => {
setState({ ...state, [`item-${i}`]: item });
});
Current state is:
item-2: 3
What I want to achieve is:
item-0: 1,
item-1: 2,
item-2: 3
I've tried to do it in several ways (all looking similar), but the effect is the same :/ does anyone knows how to resolve it?
Thanks!
I'm trying to change state, with values from array. Example:
const [state, setState] = useState({});
const test = [1, 2, 3];
test.map((item, i) => {
setState({ ...state, [`item-${i}`]: item });
});
Current state is:
item-2: 3
What I want to achieve is:
item-0: 1,
item-1: 2,
item-2: 3
I've tried to do it in several ways (all looking similar), but the effect is the same :/ does anyone knows how to resolve it?
Thanks!
Share edited Mar 16, 2020 at 16:52 skyboyer 23.8k7 gold badges62 silver badges71 bronze badges asked Mar 16, 2020 at 15:56 Ola KoziołOla Kozioł 954 silver badges10 bronze badges 2-
Don't set state in a loop.
const newState = { ...oldState }; test.forEach((item, i) => newState['item-' + i] = item); setState(newState);– Jared Smith Commented Mar 16, 2020 at 16:01 -
I hope your example is more plicated than an object filled with keys of
item-N, because you're essentially duplicating the functionality of an array :) – Dan Commented Mar 16, 2020 at 16:16
2 Answers
Reset to default 5You can update the state using forEach() method like:
test.forEach((item, i) => {
setState(state => ({...state, [`item-${i}`]: item}));
});
You can use the functional version of set state and a reduce to acplish this:
setState(prevState => {
return test.reduce((acc, next, i) => {
return {
...acc,
[`item-${i}`]: next
},
}, prevState);
});
This has the advantage of doing it in a single call and is easier to read.
本文标签： javascriptReactJSHooksHow to setState after map() functionStack Overflow
版权声明：本文标题：javascript - ReactJS, Hooks - How to setState after .map() function? - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1744931915a2124857.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论