reactjs - 如何使用文本框上的句柄更改事件来更新反应数组状态?
问题描述
下面是代码,在预加载时,所有项目都绑定在文本框中,并且在同一个文本框的帮助下,我想在反应中更新 state 的值。items 状态 get 已更新,但一旦 handlechange 方法执行结束,它就会引发错误。items.map 不是函数。如何在文本框中使用句柄更改功能来更新数组状态?
import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import {getItems} from "./helper/adminapicall";
const ManageItems = () => {
const [items, setItems] = useState([]);
const preload = () => {
getItems().then((data) => {
if (data.error) {
console.log(data.error);
} else {
setItems(data);
}
});
};
const handleChange = (index, name) => (event) => {
setItems({
...items[index].name,
error: false,
[name]: event.target.value,
});
console.log(items);
};
useEffect(() => {
preload();
}, []);
return (
<Base title="Welcome admin" description="Manage items here">
<h2 className="mb-4">All items:</h2>
<Link className="btn btn-info" to={`/admin/dashboard`}>
<span className="">Admin Home</span>
</Link>
<div className="row">
<div className="col-12">
<h2 className="text-center text-white my-3">Total 3
products</h2>
{items &&
items.map((item, index) => {
return (
<div className="row form-group" key={index}>
<div className="col-4">
<input
type="text"
className="form-control"
value={item.name}
onChange={handleChange(index, "name")}
/>
</div>
</div>
);
})}
</div>
</div>
</Base>
);``
};
export default ManageItems;
解决方案
onchange={e=> setItems(e.target.value)}
我希望这就是您在问题中提出的意思。
推荐阅读
- android - onPressed 不适用于动画按钮
- swift - 一起更改标签栏控制器 selectedIndex 后如何推送视图控制器
- python - 为什么按钮没有显示在表单中?
- c# - 如何以编程方式在 WPF 中设置图像源
- vue.js - Bootstrap-Vue 表单文件输入在删除时不检查文件格式
- r - 基于给定公式的固定效应模型,使用 R 中的 lme4
- angular - 检查后表达式已更改 - 事件订阅更新
- sql - oracle数据库连接问题
- javascript - react js-× TypeError:无法读取未定义的属性'map'
- tree - 在同一个 MCTS 上玩 AI?