Javascript 反应组件不'；t更新
当我更改存储数据数组的数据文件时，显示该数据的组件不会更改。我尝试过过滤原始数据，只得到选定的值，效果很好，但即使在数据改变后，显示也没有改变 以下是关键组件的代码和屏幕截图 单项组件：Javascript 反应组件不'；t更新,javascript,html,css,reactjs,Javascript,Html,Css,Reactjs,当我更改存储数据数组的数据文件时，显示该数据的组件不会更改。我尝试过过滤原始数据，只得到选定的值，效果很好，但即使在数据改变后，显示也没有改变 以下是关键组件的代码和屏幕截图 单项组件： function Item() { let [data, setData] = useContext(DataContext); let Array = data.map((item) => { return ( <div className="Item&qu
function Item() {
let [data, setData] = useContext(DataContext);
let Array = data.map((item) => {
return (
<div className="Item">
<img src={item.url} />
<h1>{item.name}</h1>
<p>{item.desc}</p>
<h2>{item.price}</h2>
<Link to={`/product/${item.path}`}>
<h3>See details</h3>
</Link>
</div>
);
});
return <>{Array}</>;
}
export let DataContext = createContext();
export let DataProvider = (props) => {
let [data, setData] = useState([
{
name: "Toshiba",
desc: "Laptop copmuter",
price: 299,
url:
"https://images.pexels.com/photos/3975677/pexels-photo-3975677.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
path: "Toshiba",
type: "laptop",
details:
"Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space",
},
{
name: "Lenovo",
desc: "Laptop copmuter",
price: 399,
url:
"https://images.pexels.com/photos/3975677/pexels-photo-3975677.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
path: "Lenovo",
type: "laptop",
details:
"Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this spaceSome words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space",
},
{
name: "Asus",
desc: "Laptop copmuter",
price: 199,
url:
"https://images.pexels.com/photos/3975677/pexels-photo-3975677.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
path: "Asus",
type: "laptop",
details:
"Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space",
},
{
name: "HP",
desc: "Laptop copmuter",
price: 299,
type: "laptop",
url:
"https://images.pexels.com/photos/3975677/pexels-photo-3975677.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
path: "HP",
details:
"Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space ",
},
{
name: "Apple",
desc: "Laptop copmuter",
price: 299,
type: "laptop",
url:
"https://images.pexels.com/photos/3975677/pexels-photo-3975677.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
path: "Apple",
details:
"Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this spaceSome words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space",
},
{
name: "Apple",
desc: "Android",
price: 299,
type: "mobile",
url:
"https://images.pexels.com/photos/3975677/pexels-photo-3975677.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
path: "Apple",
details:
"Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this spaceSome words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space",
},
]);
return (
<DataContext.Provider value={[data, setData]}>
{props.children}
</DataContext.Provider>
);
};
function Shop() {
let [data, setData] = useContext(DataContext);
function mobileClick(e) {
setData((prev) =>
prev.filter((item) => {
if (item.type === e.target.id) {
return true;
}
})
);
console.log(data);
}
return (
<div className="shopContainer">
<div className="filter">
<h1>Filter</h1>
<form>
<div>
<label for="mobile">Mobile </label>
<input type="checkbox" id="mobile" onClick={mobileClick} />
</div>
<div>
<label for="mobile">Laptop </label>
<input type="checkbox" id="laptop" />
</div>
<div>
<label for="mobile">PC </label>
<input type="checkbox" id="PC" />
</div>
<div>
<label for="mobile">Touchpad </label>
<input type="checkbox" id="Touchpad" />
</div>
</form>
</div>
<div className="main">
<DataProvider>
<Item />
</DataProvider>
</div>
</div>
);
}
功能项（）{
let[data，setData]=useContext（DataContext）；
让数组=data.map（（项）=>{
返回(
{item.name}
{item.desc}
{item.price}
详见
);
});
返回{Array}；
}
function Item() {
let [data, setData] = useContext(DataContext);
let Array = data.map((item) => {
return (
<div className="Item">
<img src={item.url} />
<h1>{item.name}</h1>
<p>{item.desc}</p>
<h2>{item.price}</h2>
<Link to={`/product/${item.path}`}>
<h3>See details</h3>
</Link>
</div>
);
});
return <>{Array}</>;
}
export let DataContext = createContext();
export let DataProvider = (props) => {
let [data, setData] = useState([
{
name: "Toshiba",
desc: "Laptop copmuter",
price: 299,
url:
"https://images.pexels.com/photos/3975677/pexels-photo-3975677.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
path: "Toshiba",
type: "laptop",
details:
"Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space",
},
{
name: "Lenovo",
desc: "Laptop copmuter",
price: 399,
url:
"https://images.pexels.com/photos/3975677/pexels-photo-3975677.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
path: "Lenovo",
type: "laptop",
details:
"Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this spaceSome words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space",
},
{
name: "Asus",
desc: "Laptop copmuter",
price: 199,
url:
"https://images.pexels.com/photos/3975677/pexels-photo-3975677.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
path: "Asus",
type: "laptop",
details:
"Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space",
},
{
name: "HP",
desc: "Laptop copmuter",
price: 299,
type: "laptop",
url:
"https://images.pexels.com/photos/3975677/pexels-photo-3975677.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
path: "HP",
details:
"Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space ",
},
{
name: "Apple",
desc: "Laptop copmuter",
price: 299,
type: "laptop",
url:
"https://images.pexels.com/photos/3975677/pexels-photo-3975677.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
path: "Apple",
details:
"Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this spaceSome words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space",
},
{
name: "Apple",
desc: "Android",
price: 299,
type: "mobile",
url:
"https://images.pexels.com/photos/3975677/pexels-photo-3975677.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
path: "Apple",
details:
"Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this spaceSome words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space",
},
]);
return (
<DataContext.Provider value={[data, setData]}>
{props.children}
</DataContext.Provider>
);
};
function Shop() {
let [data, setData] = useContext(DataContext);
function mobileClick(e) {
setData((prev) =>
prev.filter((item) => {
if (item.type === e.target.id) {
return true;
}
})
);
console.log(data);
}
return (
<div className="shopContainer">
<div className="filter">
<h1>Filter</h1>
<form>
<div>
<label for="mobile">Mobile </label>
<input type="checkbox" id="mobile" onClick={mobileClick} />
</div>
<div>
<label for="mobile">Laptop </label>
<input type="checkbox" id="laptop" />
</div>
<div>
<label for="mobile">PC </label>
<input type="checkbox" id="PC" />
</div>
<div>
<label for="mobile">Touchpad </label>
<input type="checkbox" id="Touchpad" />
</div>
</form>
</div>
<div className="main">
<DataProvider>
<Item />
</DataProvider>
</div>
</div>
);
}
export let DataContext=createContext（）；
导出let数据提供程序=（道具）=>{
let[data，setData]=useState([
{
名称：“东芝”，
描述：“笔记本电脑共话器”，
价格：299，
网址：
"https://images.pexels.com/photos/3975677/pexels-photo-3975677.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
路径：“东芝”，
输入：“笔记本电脑”，
细节：
“一些单词只是为了填充这个空间一些单词只是为了填充这个空间一些单词只是为了填充这个空间一些单词只是为了填充这个空间一些单词只是为了填充这个空间一些单词只是为了填充这个空间一些单词只是为了填充这个空间一些单词只是为了填充这个空间一些单词只是为了填充这个空间”，
},
{
名称：“联想”，
描述：“笔记本电脑共话器”，
价格:399，
网址：
"https://images.pexels.com/photos/3975677/pexels-photo-3975677.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
路径：“联想”，
输入：“笔记本电脑”，
细节：
“一些单词只是为了填充这个空间一些单词只是为了填充这个空间一些单词只是为了填充这个空间一些单词只是为了填充这个空间一些单词只是为了填充这个空间一些单词只是为了填充这个空间一些单词只是为了填充这个空间一些单词只是为了填充这个空间一些单词只是为了填充这个空间”，
},
{
名称：“华硕”，
描述：“笔记本电脑共话器”，
价格：199，
网址：
"https://images.pexels.com/photos/3975677/pexels-photo-3975677.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
路径：“华硕”，
输入：“笔记本电脑”，
细节：
“一些单词只是为了填充这个空间一些单词只是为了填充这个空间一些单词只是为了填充这个空间一些单词只是为了填充这个空间一些单词只是为了填充这个空间一些单词只是为了填充这个空间一些单词只是为了填充这个空间一些单词只是为了填充这个空间一些单词只是为了填充这个空间”，
},
{
名称：“HP”，
描述：“笔记本电脑共话器”，
价格：299，
输入：“笔记本电脑”，
url:
"https://images.pexels.com/photos/3975677/pexels-photo-3975677.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
路径：“HP”，
细节：
“一些单词只是为了填补这个空白一些单词只是为了填补这个空白一些单词只是为了填补这个空白一些单词只是为了填补这个空白一些单词只是为了填补这个空白一些单词只是为了填补这个空白一些单词只是为了填补这个空白一些单词只是为了填补这个空白一些单词只是为了填补这个空白一些单词只是为了填补这个空白一些单词只是为了填补这个空白行政长官",，
},
{
名称：“苹果”，
描述：“笔记本电脑共话器”，
价格：299，
输入：“笔记本电脑”，
网址：
"https://images.pexels.com/photos/3975677/pexels-photo-3975677.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
路径：“苹果”，
细节：
“一些单词只是为了填充这个空间一些单词只是为了填充这个空间一些单词只是为了填充这个空间一些单词只是为了填充这个空间一些单词只是为了填充这个空间一些单词只是为了填充这个空间一些单词只是为了填充这个空间一些单词只是为了填充这个空间一些单词只是为了填充这个空间”，
},
{
名称：“苹果”，
描述：“安卓”，
价格：299，
类型：“移动”，
网址：
"https://images.pexels.com/photos/3975677/pexels-photo-3975677.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
路径：“苹果”，
细节：
“一些单词只是为了填充这个空间一些单词只是为了填充这个空间一些单词只是为了填充这个空间一些单词只是为了填充这个空间一些单词只是为了填充这个空间一些单词只是为了填充这个空间一些单词只是为了填充这个空间一些单词只是为了填充这个空间一些单词只是为了填充这个空间”，
},
]);
返回(
{props.children}
);
};
function Item() {
let [data, setData] = useContext(DataContext);
let Array = data.map((item) => {
return (
<div className="Item">
<img src={item.url} />
<h1>{item.name}</h1>
<p>{item.desc}</p>
<h2>{item.price}</h2>
<Link to={`/product/${item.path}`}>
<h3>See details</h3>
</Link>
</div>
);
});
return <>{Array}</>;
}
export let DataContext = createContext();
export let DataProvider = (props) => {
let [data, setData] = useState([
{
name: "Toshiba",
desc: "Laptop copmuter",
price: 299,
url:
"https://images.pexels.com/photos/3975677/pexels-photo-3975677.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
path: "Toshiba",
type: "laptop",
details:
"Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space",
},
{
name: "Lenovo",
desc: "Laptop copmuter",
price: 399,
url:
"https://images.pexels.com/photos/3975677/pexels-photo-3975677.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
path: "Lenovo",
type: "laptop",
details:
"Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this spaceSome words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space",
},
{
name: "Asus",
desc: "Laptop copmuter",
price: 199,
url:
"https://images.pexels.com/photos/3975677/pexels-photo-3975677.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
path: "Asus",
type: "laptop",
details:
"Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space",
},
{
name: "HP",
desc: "Laptop copmuter",
price: 299,
type: "laptop",
url:
"https://images.pexels.com/photos/3975677/pexels-photo-3975677.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
path: "HP",
details:
"Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space ",
},
{
name: "Apple",
desc: "Laptop copmuter",
price: 299,
type: "laptop",
url:
"https://images.pexels.com/photos/3975677/pexels-photo-3975677.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
path: "Apple",
details:
"Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this spaceSome words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space",
},
{
name: "Apple",
desc: "Android",
price: 299,
type: "mobile",
url:
"https://images.pexels.com/photos/3975677/pexels-photo-3975677.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
path: "Apple",
details:
"Some words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this spaceSome words just to fill this space Some words just to fill this space Some words just to fill this space Some words just to fill this space",
},
]);
return (
<DataContext.Provider value={[data, setData]}>
{props.children}
</DataContext.Provider>
);
};
function Shop() {
let [data, setData] = useContext(DataContext);
function mobileClick(e) {
setData((prev) =>
prev.filter((item) => {
if (item.type === e.target.id) {
return true;
}
})
);
console.log(data);
}
return (
<div className="shopContainer">
<div className="filter">
<h1>Filter</h1>
<form>
<div>
<label for="mobile">Mobile </label>
<input type="checkbox" id="mobile" onClick={mobileClick} />
</div>
<div>
<label for="mobile">Laptop </label>
<input type="checkbox" id="laptop" />
</div>
<div>
<label for="mobile">PC </label>
<input type="checkbox" id="PC" />
</div>
<div>
<label for="mobile">Touchpad </label>
<input type="checkbox" id="Touchpad" />
</div>
</form>
</div>
<div className="main">
<DataProvider>
<Item />
</DataProvider>
</div>
</div>
);
}
功能商店（）{
let[data，setData]=useContext（DataContext）；
功能mobileClick（e）{
设置数据（（上一个）=>
上一个过滤器（（项目）=>{
if（item.type==e.target.id）{
返回true；
}
})
);
控制台日志（数据）；
}
返回(
滤器
可移动的
笔记本电脑
个人计算机
触摸板
);
}
提供程序之外的状态
因为您需要先用提供者
包装商店
组件，然后才能访问其中的状态
function App(){
return (
<Provider>
<Shop />
</Provider>
)
}
function Shop(){
const [state, setState] = useContext(defaultState);
return (
// YOUR REST JSX HERE...
)
}
函数应用程序（）{
返回(
)
}
功能商店（）{
const[state，setState]=使用上下文（defaultState）；
返回(
//你剩下的JSX在这里。。。
)
}
删除项的附加数据提供程序
。你已经在包装整个应用程序时提供了一个。当前您的项目
没有从该项目接收更新的数据
，而是必须从最近的数据提供程序
接收未更改的数据
商店
应该是：-
function Shop() {
let [data, setData] = useContext(DataContext);
function mobileClick(e) {
setData((prev) =>
prev.filter((item) => {
if (item.type === e.target.id) {
return true;
}
})
);
console.log(data);
}
return (
<div className="shopContainer">
<div className="filter">
<h1>Filter</h1>
<form>
<div>
<label for="mobile">Mobile </label>
<input type="checkbox" id="mobile" onClick={mobileClick} />
</div>
<div>
<label for="mobile">Laptop </label>
<input type="checkbox" id="laptop" />
</div>
<div>
<label for="mobile">PC </label>
<input type="checkbox" id="PC" />
</div>
<div>
<label for="mobile">Touchpad </label>
<input type="checkbox" id="Touchpad" />
</div>
</form>
</div>
<div className="main">
<Item />
</div>
</div>
);
}
功能商店（）{
let[data，setData]=useCont