我的UpdateCard组件在使用一次后消失。
该组件允许用户编辑卡。
UpdateCard组件显示当前用户何时与创建卡的用户相同。
我正在从当前用户的另一个组件中获取卡的ID和卡ID。
用户使用新信息成功编辑卡后,按提交,卡将更新。
更新发生后,如果用户想要再次进行编辑,则他们不能,因为更新CardComponent已消失。
我认为这是我所缺少的特定反应。
import React from "react"
import PropTypes from "prop-types"
import { Accordion, Icon, Input, Form, Button, Modal, Dropdown } from 'semantic-ui-react'
//components
import UpdateCard from "./UpdateCard"
import LikeUnlike from "./LikeUnlike"
class Card extends React.Component {
constructor(props){
super(props)
this.state = {
activeIndex: null,
search: '',
currentUser: this.props.currentUser.id
}
}
updateSearch = (event) => {
this.setState({search: event.target.value.substr(0, 20)})
}
//Opens and closes the accordion
handleClick = (e, titleProps) => {
const { index } = titleProps
const { activeIndex } = this.state
const newIndex = activeIndex === index ? -1 : index
this.setState({ activeIndex: newIndex })
}
render () {
const { activeIndex } = this.state
const { showEditMenu } = this
let filteredCards = this.props.librarys.filter(
(library) => {
return library.title.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1 || library.desc.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1
}
)
return (
<React.Fragment>
<div className='search-bar'>
<Input fluid icon={<Icon name='search' inverted circular link />} value={this.state.search} onChange={this.updateSearch} placeholder="Search Syntaxes" />
</div>
<ul>
{filteredCards.map((librarys, index)=>{
return(
<div key={index} >
<Accordion>
<Accordion.Title >
<Icon
name='dropdown'
active={activeIndex === index}
index={index}
onClick={this.handleClick}
/>
<Icon name='trash alternate'
onClick={() => {
this.props.handleDelete(librarys.id)}}
/>
{
//Update Icon
librarys.user && librarys.user.id === this.props.currentUser.id ?
<UpdateCard
handleUpdate={this.props.handleUpdate}
libraryId={librarys.id}
likes={librarys.likes}
librarys={librarys}
/>
: ''
}
Title: {librarys.title} Likes: {librarys.likes}
<LikeUnlike
handleUpdate={this.props.handleUpdate}
libraryId={librarys.id}
librarys={librarys}
/>
</Accordion.Title>
<Accordion.Content active={activeIndex === index}>
Description: <br></br>
{librarys.desc} <br></br>
Markdown: <br></br>
{librarys.markdown}
</Accordion.Content>
</Accordion>
</div>
)
})}
</ul>
</React.Fragment>
);
}
}
export default Card
答案 0 :(得分:0)
也发生在我身上,当我使用点击功能中的setstate时,“组件”选项卡全部空白,所有的React组件树都消失了。
onShowClick = e => {
this.setState({
showInfo: false
});
}