[英]How to setState() using React-hooks of array of object
How can I use React-hooks
to setState()
my array
of objects
so that I can display this in my editform
to perform update
action.如何使用React-hooks
setState()
我的objects
array
,以便我可以在我的editform
中显示它以执行update
操作。
Any syggestion how can I do so with React-hooks
.我怎么能用React-hooks
做到这一点。
Github link for code Github 代码链接
//Blog.js //博客.js
class Blogs extends Component{
constructor(props) {
super(props);
this.state = {
modal: false,
updatable: false,
justClicked: null,
activePage: 1,
requiredItem : null,
_id: '',
blog_short_desc: '',
blog_name: ''
};
this.replaceModalItem = this.replaceModalItem.bind(this);
this.onTodoChange = this.onTodoChange.bind(this);
}
static propTypes = {
getBlog: PropTypes.func.isRequired,
deleteBlog: PropTypes.func.isRequired,
updateBlog: PropTypes.func.isRequired,
resume: PropTypes.object.isRequired,
auth: PropTypes.object.isRequired,
loading: PropTypes.object.isRequired
}
toggle = (id) => {
this.setState({
modal: !this.state.modal
});
}
componentDidMount() {
this.props.getBlog();
}
replaceModalItem(id) {
this.setState({
modal: true,
requiredItem: id
});
}
onTodoChange = (e) => {
this.setState({
[e.target.name] : e.target.value
});
}
onSubmit = (e, id) => {
//Perform edit submit
}
render(){
return(
<Container>
<div>
{/* edit card dialog */}
<EditBlog blogs={blogs} user={this.props.auth} onTodoChange={this.onTodoChange} {...this.state} toggle={this.toggle} onSubmit={this.onSubmit}/>
<Grid style={{padding: 0}} id="todo">
{/* Grid of display list of blogs */}
</Grid>
</div>
</Container>
)
}
}
const mapStateToProps = (state) => ({
resume: state.resume,
auth: state.auth,
loading: state.apiCallsInProgress > 0
});
export default connect(mapStateToProps, {getBlog, deleteBlog, updateBlog }) (Blogs);
//Edit.js //编辑.js
const EditBlog = ({ blogs, toggle, onTodoChange, onSubmit, ...state}) => {
const itemsPerPage = 6;
let activeBlogs = blogs.slice (itemsPerPage * state.activePage - itemsPerPage, itemsPerPage * state.activePage);
return(
<span>
{activeBlogs.map(({ _id, blog_short_desc, blog_name }) => (
<Modal
isOpen = {state.modal && state.requiredItem === _id}
toggle = {()=>this.toggle(_id)}
>
<ModalHeader toggle={toggle} style={{fontWeight: "bold"}}>
Edit your blog {state.blog_name}
</ModalHeader>
<ModalBody>
<Form onSubmit={e => onSubmit(e, state._id )}>
<FormGroup>
<Label for="blogHeading">Blog Heading</Label>
<Input type="text" name="blog_short_desc" id="blogHeading" placeholder="Update one liner"
onChange={onTodoChange} value={blog_short_desc}/>
<Label for="blogName">Blog Name</Label>
<Input type="text" name="blog_name" id="blogName" placeholder="Update blog name"
onChange={onTodoChange} value={blog_name}/>
<Button
color="dark"
style={{marginTop: '2rem'}}
block
>Edit blog</Button>
</FormGroup>
</Form>
</ModalBody>
</Modal>
))}
</span>
)
}
const mapStateToProps = state => ({
resume: state.resume,
auth: state.auth
})
export default connect(mapStateToProps, { updateBlog })(EditBlog);
//JsonArray //JsonArray
[
{
"_id": "5ea2efeec26f173008dcb80b",
"blog_short_desc": "Hey tammy tammy",
"blog_name": "sirirrrheyyy siri",
"blog_desc": "hello",
"blog_image_link": "",
"blog_by": "5e9478c5b53c4735d4a5cdf1",
"blog_by_author": "Tanmoy Sarkar",
"date": "2020-04-24T13:55:58.818Z",
"__v": 0
},
{
"_id": "5e9f07d0c25ee11fc0a1260f",
"blog_short_desc": "Hey tammy",
"blog_name": "sirirrrheyyy siri",
"blog_desc": "fsfsfdfdsgdfgfdgdg",
"blog_image_link": "",
"blog_by": "5e9478c5b53c4735d4a5cdf1",
"blog_by_author": "Tanmoy Sarkar",
"date": "2020-04-21T14:48:48.633Z",
"__v": 0
}
]
//Redux //还原
//UI //用户界面
You questions is rather vague.你的问题比较模糊。 A little more clarification can help.多一点澄清会有所帮助。 I suppose you mean storing the son array in a state using the useState hook.我想您的意思是使用 useState 挂钩将儿子数组存储在 state 中。
const [array, setArray] = useState(null)
setArray(jsonArray)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.