Javascript 组件赢得'；t更新记录后重新加载

我试图根据当前用户Id是否等于手风琴Id来显示图标

i、 我试图让制作卡片的用户可以编辑卡片

当代码中显示

//更新图标

时，就会发生这种情况

记录已成功更新（我可以在数据库中看到，当您刷新页面时，它会正确显示，没有错误），但当组件尝试重新呈现时，我会出现以下错误：

我觉得这是显而易见的，我错过了一些简单的东西

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: ''
    }
  }
  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 options = [
    //      { key: 'css', text: 'CSS', value: 'css' },
    //      { key: 'html', text: 'HTML', value: 'html' },
    //      { key: 'javascript', text: 'Javascript', value: 'javascript' },
    //      { key: 'rails', text: 'Rails', value: 'rails' },
    //      { key: 'react', text: 'React', value: 'react' },
    //      { key: 'ruby', text: 'Ruby', value: 'ruby' },
    //  ]
    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.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

从“React”导入React
从“道具类型”导入道具类型
从“语义ui”导入{手风琴、图标、输入、窗体、按钮、模式、下拉列表}
//组成部分
从“/UpdateCard”导入UpdateCard
从“/LikeUnlike”导入LikeUnlike
类卡扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
activeIndex:null，
搜索：“”
}
}
更新搜索=（事件）=>{
this.setState（{search:event.target.value.substr（0,20）}）
}
//打开和关闭手风琴
handleClick=（e，titleProps）=>{
常数{index}=titleProps
const{activeIndex}=this.state
const newIndex=activeIndex==索引？-1:索引
this.setState（{activeIndex:newIndex}）
}
render（）{
//常量选项=[
//{键：'css'，文本：'css'，值：'css'}，
//{key:'html'，text:'html'，value:'html'}，
//{key:'javascript'，text:'javascript'，value:'javascript'}，
//{key:'rails'，text:'rails'，value:'rails'}，
//{键：'react'，文本：'react'，值：'react'}，
//{key:'ruby'，text:'ruby'，value:'ruby'}，
//  ]
const{activeIndex}=this.state
const{showEditMenu}=this
让filteredCards=this.props.librarys.filter(
（图书馆）=>{
返回library.title.toLowerCase（）.indexOf（this.state.search.toLowerCase（））！=-1 | | library.desc.toLowerCase（）.indexOf（this.state.search.toLowerCase（））！=-1
}
)
返回(

{filteredCards.map（（图书馆，索引）=>{
返回(
{
这个.props.handleDelete（librarys.id）
}}
/>
{
//更新图标
librarys.user.id==this.props.currentUser.id？
: ''
}
标题：{librarys.Title}喜欢：{librarys.Likes}
说明：


{librarys.desc}


降价：


{librarys.markdown}
)
})}

);
}
}
导出默认卡

在比较值之前，您需要执行空检查。如下图所示：

librarys.user && librarys.user.id === this.props.currentUser.id ?
// same stuff here

---

这样就消除了错误。新的问题是，一旦页面再次呈现，就不能再进行编辑。