Question

我有一个对象，通过

形式传递给n = modal组件

JSON.stringigy()

我想访问数据上的标题键，但是当我这样做时，出现一个 TypeError。。我尝试使用console.log(data[0])将其转换为字符串，但仍然遇到相同的错误。我正在尝试访问模式中的数据，因此当模式打开时，将使用表中的数据设置模式中输入的值，以便我可以轻松地对其进行编辑

当我console.log(data[0].title)收到对象中的项目时，但一旦登录import React, { Component } from 'react'; import './Update.css'; import Search from '../Search/Search'; // import Modal from './Modal/Modal'; const Table = ({ data, openBookDetails }) => ( <table class="table table-hover"> <thead> <tr class="table-primary"> <th scope="col">Title</th> <th scope="col">Author</th> <th scope="col">ISBN</th> <th scope="col">No. Of Copies</th> </tr> </thead> <tbody> {data.map(row => <TableRow key={row.id} row={row} openBookDetails={openBookDetails}/> )} </tbody> </table> ) const TableRow = ({ row, openBookDetails }) => ( <tr class="table-light" onClick={openBookDetails}> <th scope="row" >{row.title}</th> <td >{row.author}</td> <td >{row.isbn}</td> <td >24</td> </tr> ) const Modal = ({ closeBookDetails, isBookDetailsOpen, children, data }) => { const showHideClassName = isBookDetailsOpen ? 'modal display-block' : 'modal display-none'; console.log(data[0].title); return ( <div className={showHideClassName}> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Update Book</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="form-group"> <label htmlFor="title">Title</label> <input type="text" class="form-control" id="title" aria-describedby="title" placeholder="Enter title of book" value={data}/> </div> <div class="form-group"> <label htmlFor="author">Author</label> <input type="text" class="form-control" id="author" aria-describedby="author" placeholder="Enter author name" value={data}/> </div> <div class="form-group"> <label htmlFor="isbn">ISBN</label> <input type="number" min="0" class="form-control" id="isbn" aria-describedby="isbn" placeholder="Enter ISBN number" value={data.title}/> </div> <div class="form-group"> <label for="copies">Number of Copies</label> <input type="number" min="0" class="form-control" id="copies" aria-describedby="copies" placeholder="Enter the number of copies" value={data.title}/> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary">Save changes</button> <button type="button" class="btn btn-secondary" data-dismiss="modal" onClick={closeBookDetails}>Close</button> </div> </div> </div> {children} </div> ); }; class Update extends Component{ constructor(props) { super(props); this.state = { value: '', suggestions: [], setOfAllBooks: [], searchedBooks: [], isBookDetailsOpen: false, }; this.setTableData = this.setTableData.bind(this); this.openBookDetails = this.openBookDetails.bind(this); this.closeBookDetails = this.closeBookDetails.bind(this); } setTableData(searchedBook){ this.setState({searchedBooks: searchedBook}) console.log(this.state.searchedBooks) } openBookDetails(){ console.log('openBookDetails') this.setState({ isBookDetailsOpen: true}) } closeBookDetails(){ this.setState({ isBookDetailsOpen: false}) } render(){ return( <div> <Search state={this.state} setTableData={this.setTableData} /> <Table data={this.state.searchedBooks} openBookDetails={this.openBookDetails}/> <Modal data={this.state.searchedBooks} isBookDetailsOpen={this.state.isBookDetailsOpen} closeBookDetails={this.closeBookDetails} /> {/* <Modal /> */} </div> ) } } export default Update;，就会再次出现 TypeError 。

{
    "name": "gtkmm",
    "sources": [
        {
            "type": "archive",
            "url": "http://ftp.gnome.org/pub/GNOME/sources/gtkmm/3.22/gtkmm-3.22.2.tar.xz",
            "sha256": "91afd98a31519536f5f397c2d79696e3d53143b80b75778521ca7b48cb280090"
        }
    ]
},

Answer 1

当您将数据作为this.state.searchedBooks传递时，您正在传递已定义的对象，但是从您的代码中我看不到您实际在何处将值设置为上面列出的数组。您是否缺少代码的一部分？

如果以console.log（data [0]）进行操作，则对此进行控制台登录不会返回错误，但是会为data [0] .title或该对象的任何其他部分返回类型错误。

您能尝试这样的事情吗？

if(data) {
  console.log(data[0].title)
}

所以我们可以判断服务器的响应是否到达。那么也许这将有助于进一步评估。

您还考虑过在Update组件中使用箭头功能，以便消除绑定这些功能的需要。

class Update extends Component{
constructor(props) {
    super(props);

    this.state = {
        value: '',
        suggestions: [],
        setOfAllBooks: [],
        searchedBooks: [],
        isBookDetailsOpen: false,
    };
}

setTableData = (searchedBook) => {
    this.setState({searchedBooks: searchedBook})

    console.log(this.state.searchedBooks)
}

openBookDetails = () => {
    console.log('openBookDetails')
    this.setState({ isBookDetailsOpen: true})
}

closeBookDetails = () => {
    this.setState({ isBookDetailsOpen: false})
}

render(){
    return(
        <div>            
            <Search state={this.state} setTableData={this.setTableData} />
            <Table data={this.state.searchedBooks} openBookDetails={this.openBookDetails}/>
            <Modal data={this.state.searchedBooks} isBookDetailsOpen={this.state.isBookDetailsOpen} closeBookDetails={this.closeBookDetails} />
            {/* <Modal /> */}
        </div>
    )
}

}

更新：

是在该时间点或更晚时间引发错误，因为在模态组件中我确实看到了两个对data.title的引用，这会引发错误。

如下更改这些行：

<div class="form-group">
                            <label htmlFor="isbn">ISBN</label>
                            <input type="number" min="0" class="form-control" id="isbn" aria-describedby="isbn" placeholder="Enter ISBN number" value={data[0].title}/>                               
                        </div>
                        <div class="form-group">
                            <label for="copies">Number of Copies</label>
                            <input type="number" min="0" class="form-control" id="copies" aria-describedby="copies" placeholder="Enter the number of copies" value={data[0].title}/>                  
                        </div>

在这种情况下，您的输入试图使用不存在的data.title值。不知道这是否行不通。

Answer 2

我找到了解决方法。

在我做的模态内

 let selectedBookDetails = []
 data.map(row => selectedBookDetails = row)

然后我访问了selectedBookDetails.title，selectedBookDetails.author，selectedBookDetails.isbn这样的数据

现在，下一个挑战是对其进行编辑。谢谢大家的贡献。

Answer 3

代替使用此：

console.log(data[0]?.title)

可以解决问题。

TypeError：无法读取React中未定义的属性'title'

3 个答案: