Reactjs 如何使用文本框上的句柄更改事件更新react数组状态?
下面是代码,在预加载时,所有项目都在文本框内绑定,在同一文本框的帮助下,我想更新react中state的值。 items state get已更新,但一旦handlechange方法执行结束,它就会抛出一个错误。 items.map不是一个函数。如何使用文本框上的句柄更改功能来更新数组状态Reactjs 如何使用文本框上的句柄更改事件更新react数组状态?,reactjs,react-native,react-state,Reactjs,React Native,React State,下面是代码,在预加载时,所有项目都在文本框内绑定,在同一文本框的帮助下,我想更新react中state的值。 items state get已更新,但一旦handlechange方法执行结束,它就会抛出一个错误。 items.map不是一个函数。如何使用文本框上的句柄更改功能来更新数组状态 import React,{useState,useffect}来自“React”; 从“react router dom”导入{Link}; 从“/helper/adminapicall”导入{getIte
import React,{useState,useffect}来自“React”;
从“react router dom”导入{Link};
从“/helper/adminapicall”导入{getItems};
const ManageItems=()=>{
const[items,setItems]=useState([]);
常量预加载=()=>{
getItems()。然后((数据)=>{
if(data.error){
console.log(data.error);
}否则{
设置项目(数据);
}
});
};
常量handleChange=(索引、名称)=>(事件)=>{
设置项({
…项[索引]。名称,
错误:false,
[名称]:event.target.value,
});
控制台日志(项目);
};
useffect(()=>{
预加载();
}, []);
返回(
所有项目:
管理之家
总数3
产品
{项目&&
items.map((项目,索引)=>{
返回(
);
})}
);``
};
导出默认项目;
onchange={e=>setItems(e.target.value)}
我希望这就是您在问题中提出的意思。感谢Samuel的回答,但我不明白如果不在文本框中调用handlechange方法,它将如何执行。
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;