Arrays 在react中将输入元素动态添加到表单
我试图从我的表单中动态地将状态添加到一个数组中,这样多个输入最终可以保存为同一数组中的状态,这与redux表单非常相似,但我还不知道redux 我不知道如何访问当前数组,以便将当前输入值设置为状态。在本例中,我试图通过映射当前数组,将配料名称保存在配方状态的配料数组中。问题是,当我试图映射当前数组时,它显然根本不是一个数组,当我试图将数据输入到输入中时,会出现以下错误Arrays 在react中将输入元素动态添加到表单,arrays,reactjs,dom,Arrays,Reactjs,Dom,我试图从我的表单中动态地将状态添加到一个数组中,这样多个输入最终可以保存为同一数组中的状态,这与redux表单非常相似,但我还不知道redux 我不知道如何访问当前数组,以便将当前输入值设置为状态。在本例中,我试图通过映射当前数组,将配料名称保存在配方状态的配料数组中。问题是,当我试图映射当前数组时,它显然根本不是一个数组,当我试图将数据输入到输入中时,会出现以下错误 TypeError: currentIngredients.map is not a function (anonymous f
TypeError: currentIngredients.map is not a function
(anonymous function)
src/components/recipes/Recipe_Form.js:68
65 | <input
66 | onChange={e => {
67 | const name = e.target.value;
> 68 | setRecipe((currentIngredients) =>
| ^ 69 | currentIngredients.map(x =>
70 | x.id === i.id
71 | ? {
TypeError:CurrentComponents.map不是函数
(匿名函数)
src/components/recipes/Recipe_Form.js:68
65 | {
67 | const name=e.target.value;
>68 |设置配方((当前配料)=>
|^69| CurrentComponents.map(x=>
70 | x.id==i.id
71 | ? {
.我不确定如何以编辑状态的方式访问配料数组
谢谢
export const Recipe_Form = () => {
const recipeContext = useContext(RecipeContext);
const [recipe, setRecipe] = useState({
title: "",
img: "",
ingredients: [{ id: "1", name: "cheese", amount: "200" }],
method: "",
serves: "",
time: "",
});
const onChange = (e) =>
setRecipe({ ...recipe, [e.target.name]: e.target.value });
const onSubmit = (e) => {
e.preventDefault();
recipeContext.addRecipe(recipe);
setRecipe({
title: "",
img: "",
ingredients: [],
method: "",
serves: "",
time: "",
});
};
const { title, img, ingredients, method, serves, time } = recipe;
return (
<div className='row center-align'>
<form className='col s12' onSubmit={onSubmit}>
{/* Image */}
<div className='input-field col s12 center-align'>
<input
type='text'
placeholder='Please enter an image url'
name='img'
value={img}
onChange={onChange}
/>
</div>
{/* Title */}
<div className='input-field col s12 center-align'>
<input
type='text'
placeholder='Please enter recipe title'
className='validate'
name='title'
value={title}
onChange={onChange}
/>
</div>
{ingredients.map((i) => {
return (
<div key={i.id}>
<input
onChange={(e) => {
const name = e.target.value;
setRecipe((currentIngredients) =>
currentIngredients.map((x) =>
x.id === i.id
? {
...x,
name,
}
: x
)
);
// e.target.value
}}
value={i.name}
placeholder='ingredient'
/>
<input value={i.amount} placeholder='amount' />
</div>
);
})}
{/* Method */}
<div className='methodContainer'>
<div className='row method-line'>
<div className='input-field col s12 center-align'>
<input
type='text'
placeholder='Please enter method'
className='validate'
name='method'
value={method}
onChange={onChange}
/>
</div>
</div>
</div>
<a className='btn-floating btn-large waves-effect waves-light red'>
<i className='fas fa-plus'></i>
</a>
{/* Serves */}
<div className='input-field col s12 center-align'>
<input
type='number'
placeholder='Number of servings'
className='validate'
name='serves'
value={serves}
onChange={onChange}
/>
</div>
{/* Time */}
<div className='input-field col s12 center-align'>
<input
type='text'
placeholder='Time to compelete...'
className='validate'
name='time'
value={time}
onChange={onChange}
/>
</div>
<br></br>
<button
className='btn waves-effect waves-light'
type='submit'
name='action'>
Submit
</button>
</form>
</div>
);
};
export default Recipe_Form;
export const Recipe\u Form=()=>{
const recipeContext=useContext(recipeContext);
const[recipe,setRecipe]=useState({
标题:“,
img:“”,
配料:[{id:“1”,名称:“奶酪”,数量:“200”},
方法:“,
服务:“,
时间:“,
});
const onChange=(e)=>
setRecipe({…recipe[e.target.name]:e.target.value});
const onSubmit=(e)=>{
e、 预防默认值();
recipeContext.addRecipe(配方);
配方({
标题:“,
img:“”,
成分:[],
方法:“,
服务:“,
时间:“,
});
};
const{title,img,配料,方法,服务,时间}=配方;
返回(
{/*图像*/}
{/*标题*/}
{成分图((i)=>{
返回(
{
const name=e.target.value;
设置配方((当前配料)=>
CurrentComponents.map((x)=>
x、 id==i.id
? {
…x,
名称
}
:x
)
);
//目标价值
}}
值={i.name}
占位符
/>
);
})}
{/*方法*/}
{/*服务*/}
{/*时间*/}
提交
);
};
导出默认配方表;
这不是吗,因为CurrentComponents
实际上是您的状态对象?您不必这样使用它。您可以这样做:
setRecipe({
...recipe,
ingredients: recipe.ingredients.map(x =>
x.id === i.id
? {
...x,
name
}
: x
)
});