一次使用后反应成分消失

时间:2019-04-21 03:39:15

标签: reactjs

我的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

1 个答案:

答案 0 :(得分:0)

也发生在我身上,当我使用点击功能中的setstate时,“组件”选项卡全部空白,所有的React组件树都消失了。

onShowClick = e => {
  this.setState({
      showInfo: false
  });
 }