React Hooks:将所有状态值设置为与useState相同的值

Question

React新功能。我想弄清楚如何用一个特定对象的值来设置所有对象的状态值。

下面是CodeSandbox: https://codesandbox.io/s/blissful-https-1o415

点击Fork区域的Apply to All按钮，Spoon和Knife区域的数据将更新为与Fork区域的数据相同。是否可以在地图中设置一个对象的数据与另一个对象的数据?它会发生在地图功能中还是在其他地方?谢谢你的帮助。

import React, { useState, useEffect } from "react";
import axios from "axios";
import "./styles.css";
function App() {
const [kitchenItems, setkitchenItems] = useState([]);
useEffect(() => {
axios
.get("./data.json")
.then((response) => setkitchenItems(response.data.kitchen));
}, []);
function applyAll(i) {
const updatedData = kitchenItems.map((item, idx) => {
if (idx === i) {
return {
...item,
size: item.size,
text: item.text,
value: item.value
};
}
return item;
});
setkitchenItems(updatedData);
console.log(kitchenItems);
}
return (
<main>
{kitchenItems.map((item, i) => (
<div className="utensil" key={i}>
<h2>{item.name}</h2>
<ul>
<li>{item.size}</li>
<li>{item.text}</li>
<li>{item.value}</li>
</ul>
<button type="button" name="apply" onClick={() => applyAll(i)}>
Apply to All
</button>
</div>
))}
</main>
);
}
export default App;

Answer 1

正如另一个答案所述，您将看不到控制台日志的更新，因为它将是异步的，并且您需要使用useEffect来查看更新。虽然你的代码很接近。两件事:

1. 你需要为applyAll (useCallback钩子)使用一个稳定的函数

2. 您正在查看index等于您试图复制的对象，并且只是使用相同的值。这只改变勺子已经勺子的大小和更多的值。你想要的是改变其他人。下面是我在你的codepen上做的一个例子:

import React, { useCallback, useEffect, useState } from "react";
import axios from "axios";
import "./styles.css";
function App() {
const [kitchenItems, setkitchenItems] = useState([]);
useEffect(() => {
axios
.get("./data.json")
.then((response) => setkitchenItems(response.data.kitchen));
}, []);
const applyAll = useCallback((i) => {
const updatedData = kitchenItems.map((item, idx) => {
if (idx !== i) { //<-- You want to check if the index of the item doesn't equal the index of the item you want to change it to.
return {
...item,
size: kitchenItems[i].size, //<-- Since you have the index of the item, you can just call to get it's values here from kitchenItems
text: kitchenItems[i].text,
value: kitchenItems[i].value
};
}
return item;
});
setkitchenItems(updatedData);
}, [kitchenItems]);
return (
<main>
{kitchenItems.map((item, i) => (
<div className="utensil" key={i}>
<h2>{item.name}</h2>
<ul>
<li>{item.size}</li>
<li>{item.text}</li>
<li>{item.value}</li>
</ul>
<button type="button" name="apply" onClick={() => applyAll(i)}>
Apply to All
</button>
</div>
))}
</main>
);
}
export default App;

如果我明白你想要完成什么，这应该能解决你的问题。

Answer 2

setkitchenItems()是异步方法，不能在setkitchenItems()之后立即得到kitchenItems的更新值。

setkitchenItems(updatedData);
console.log(kitchenItems); // This will console the old `kitchenItems`

您应该使用useEffect并添加kitchenItems依赖来检查更新的状态值。

useEffect(() => {
console.log(kitchenItems);
}, [kitchenItems]);