gpt4 book ai didi

reactjs - 如何将 map 函数用于钩子(Hook) useState 属性

转载 作者:行者123 更新时间:2023-12-03 23:28:07 25 4
gpt4 key购买 nike

我尝试使用 map 函数在 react-hooks useState 中循环我的列表数据,但我遇到了一个错误:“TypeError:无法读取未定义的属性 'map'”

//1.Initial declaration
const App = props=> {
const [state, changeState]= useState ({
name:"",
eventTitle:"",
details:"",
objdata:{},
list:[],
toggleIndex:"",
editName: "",
editEventTitle: "",
editDetails: "",
editObj: {}
});


//2.logic comes here


//3.tried using map


{(state.list.map((data,id)=>{
console.log ('loop data',data)
}))}

enter image description here

最佳答案

正如我们怀疑你没有以正确的方式设置你的状态。我试图在我的评论中解释,当你设置你的状态时,它不会将更新的属性与当前的属性合并。所以,你应该考虑一下。现在你正在设置你的状态:

const handleName = name => {
changeState({
name: name.target.value
});
};

在这里,您正在设置 name属性(property)并失去您所在州的其他部分。因此,当您设置状态时,您会丢失 list以及您所在州的其他地区。你应该这样做:
const handleName = name => {
const { target } = name;

changeState(state => ({
...state,
name: target.value,
}));
};

您采取旧状态,保留 spreading 的其他属性它,然后更新相关部分。我会在这里使用 event而不是 name .它不是“名称”,它实际上是“事件” :)
const handleName = event => {
const { target } = event;

changeState(state => ({
...state,
name: target.value,
}));
};

此外,您的代码中还有一些其他问题和不必要的部分。例如,您在处理提交并将对象添加到您的 list 时遇到了很多困难。 .您不需要额外的 objdata在您的状态下将其推送到 list .如果你想构造一个额外的对象,你可以在函数本身中完成。

这是一个非常简单的方法:
const submitHandle = () => {
const { name, eventTitle, details } = state;
const obj = { name, eventTitle, details };

changeState(state => ({
...state,
list: [ ...state.list, obj ],
}))
};

同样,我们使用扩展运算符来保留状态的其他部分,同时更新 list , 保留其他对象。不要像在 submitHandle 中那样设置你的状态。功能。试着把它想得简单:)

此外,您不需要在不需要时绑定(bind)您的函数。您可以在下面找到代码的工作副本。我只是删除了不必要的部分并解决了问题。
import React, { useState } from "react";
import ReactDOM from "react-dom";

const App = props => {
const [state, changeState] = useState({
name: "",
eventTitle: "",
details: "",
list: [],
toggleIndex: "",
editName: "",
editEventTitle: "",
editDetails: "",
editObj: {}
});

const handleName = event => {
const { target } = event;

changeState(state => ({
...state,
name: target.value
}));
};

const handleEventTitle = event => {
const { target } = event;

changeState(state => ({
...state,
eventTitle: target.value
}));
};

const handleDetails = event => {
const { target } = event;

changeState(state => ({
...state,
details: target.value
}));
};

const submitHandle = () => {
const { name, eventTitle, details } = state;
const obj = { name, eventTitle, details };

changeState(state => ({
...state,
list: [...state.list, obj]
}));
};

const resetHandle = () =>
changeState(state => ({
...state,
name: "",
eventTitle: "",
details: ""
}));

return (
<div>
<div className="jumbotron jumbotron-fluid">
<div className="container">
<h1 className="display-5 text-center">Let's set your reminders</h1>
</div>
</div>
<div className="bg-dark container-fluid">
<div className="row">
<div className="col-sm-12 col-md-4 col-lg-4 " />

<div className="col-sm-12 col-md-4 col-lg-4 ">
<div className="card login-card ">
<div className=" card-header ">
<h3 className="text-center"> TO-DO LIST FORM</h3>
</div>

<div className="card-body">
<form className="form-elements">
<input
value={state.name}
className="form-control form-inputs form-elements"
type="text"
onChange={handleName}
placeholder="user name"
/>
<input
value={state.eventTitle}
className="form-control form-inputs form-elements"
type="text"
onChange={handleEventTitle}
placeholder="Event Title"
/>
<input
value={state.details}
className="form-control form-inputs form-elements"
type="text"
onChange={handleDetails}
placeholder="Details "
/>
</form>
</div>

<div className="card-footer ">
<button
type="submit"
onClick={submitHandle}
className="btn-primary offset-lg-1 offset-md-0 btn-sm "
>
Create
</button>

<button
type="reset"
onClick={resetHandle}
className="btn-primary offset-lg-5 offset-md-0 btn-sm"
>
cancel
</button>
</div>
</div>
</div>
<div className="col-sm-12 col-md-4 col-lg-4 " />
</div>

<div className="container-fluid bg-dark">
<div className="row ">
{state.list.map(data => (
<div style={{ border: "1px black solid" }}>
<p>{data.name}</p>
<p>{data.eventTitle}</p>
<p>{data.details}</p>
</div>
))}
</div>
</div>
</div>

<div
className="footer footer-copyright"
style={{ background: "#e9ecef" }}
>
<div className="container">
<h6 className=" text-center">Just make it work ;)</h6>
</div>
</div>
</div>
);
};

ReactDOM.render(<App />, document.getElementById("root"));

关于reactjs - 如何将 map 函数用于钩子(Hook) useState 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57305227/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com