我希望将图书数据传递到react中的视图页到编辑页。
我希望将图书数据传递到react中的视图页到编辑页。
提问于 2022-05-01 16:23:42
我使用了螺旋桨方法，但是铬控制台说这个错误TypeError:无法读取未定义的属性(读'props')这是我的“详细信息”视图页面的全部代码
import React,{ useEffect, useState } from 'react'
import axios from "axios";
import { variables } from "../../../Veriables";
const ManageBookView =() => {
const [book, setBook]= useState([])
const getData = async () =>{
try{
const data = await axios.get(variables.API_URL+"book")
console.log(data.data);
setBook(data.data)
}
catch(e){
console.log(e)
}
}
useEffect(()=>{
getData()
},[])
async function deleteClick (id) {
if(window.confirm('Are you sure ?')){
let result = fetch(variables.API_URL+'book/'+id,{
method:'DELETE'
});
result = await (await result).json;
alert('Book Deleted Successfully!')
getData();
}
}
const editCick = (id) =>{
this.props.history.push({
pathname:'/managebookedit/'+id
})
}
return (
<div>
{/* Content Wrapper. Contains page content */}
<div className="content-wrapper">
<div className="content-header">
<div className="container-fluid">
<div className="row mb-2">
<div className="col-sm-6">
<h1 className="m-0">Book</h1>
</div>{/* /.col */}
<div className="col-sm-6">
<ol className="breadcrumb float-sm-right">
<li className="breadcrumb-item"><a href="/paneladmin">Home</a></li>
<li className="breadcrumb-item active">Manage Book</li>
</ol>
</div>{/* /.col */}
</div>{/* /.row */}
</div>{/* /.container-fluid */}
</div>
<section className="content">
<div className="container-fluid">
<div className="row">
<div className="col-12">
<div className="card">
<div className="card-header">
<h3 className="card-title"> Manage Book</h3>
<div className="card-tools">
<a href="/managebookadd"><button type="button" className="btn btn-block btn-outline-primary btn-sm"> Add Book
</button></a>
</div>
</div>
{/* /.card-header */}
<div className="card-body table-responsive p-0" style={{height: 500}}>
<table className="table table-hover text-nowrap">
<thead>
<tr>
<th>Book ID</th>
<th>Title</th>
<th>Author</th>
<th>Category</th>
<th>Availability</th>
</tr>
</thead>
<tbody>
{book.map((item) =>{
return(
<tr key={item.book_id}>
<td>{item.book_id}</td>
<td>{item.book_title}</td>
<td>{item.book_author}</td>
<td>{item.book_category}</td>
<td>{item.book_availability}</td>
<td> <button type="button" class="btn btn-block btn-light btn-sm"
onClick={()=>editCick(item.book_id)}>Edit</button> </td>
<td><button type="button" class="btn btn-block btn-danger btn-sm"
onClick={()=>deleteClick(item.book_id)}>Delete</button></td>
</tr>
)
})}
</tbody>
</table>
</div>
{/* /.card-body */}
</div>
{/* /.card */}
</div>
</div>
{/* /.row */}
</div>
</section>
</div>
</div>
)
}
export default ManageBookView;我找不到代码的错误，这是我的编辑页代码，我如何将数据传递给这个页面。
import React, {useState, useEffect} from 'react';
import axios from 'axios';
import { variables } from '../../../Veriables';
const ManageBookEdit = (props) => {
const [book, setBook] = useState({title:'',author:'',category:'',releasedate:'',price:'',description:'',type:'' })
const [title, setTitle] = useState('')
const [author, setAuthor] = useState('')
const [category, setCategory] = useState('')
const [releasedate, setReleasedate] = useState('')
const [price, setPrice] = useState('')
const [description, setDescription] = useState('')
const [type, setType] = useState('')
const url = variables.API_URL+'book/Getbook/'+props.match.param.id;
const getData = async () =>{
try{
const data = await axios.get(url)
console.log(data.data);
setBook(data.data)
}
catch(e){
console.log(e)
}
}
useEffect(()=>{
getData()
},[])
return (
<div>
{/* Content Wrapper. Contains page content */}
<div className="content-wrapper">
{/* Content Header (Page header) */}
<section className="content-header">
<div className="container-fluid">
<div className="row mb-2">
<div className="col-sm-6">
<h1>Book Add</h1>
</div>
<div className="col-sm-6">
<ol className="breadcrumb float-sm-right">
<li className="breadcrumb-item"><a href="/paneladmin">Home</a></li>
<li className="breadcrumb-item"><a href="/managebook">Book Manage</a></li>
<li className="breadcrumb-item active">Book Add</li>
</ol>
</div>
</div>
</div>{/* /.container-fluid */}
</section>
{/* Main content */}
<section className="content">
<div className="row">
<div className="col-md-12">
<div className="card card-primary">
<div className="card-header">
<h3 className="card-title">Book</h3>
<div className="card-tools">
<button type="button" className="btn btn-tool" data-card-widget="collapse" title="Collapse">
<i className="fas fa-minus" />
</button>
</div>
</div>
<div className="card-body">
<div className="form-group">
<label htmlFor="inputName">Title</label>
<input type="text" id="inputName" className="form-control"
value={book.title}
/>
</div>
<div className="form-group">
<label htmlFor="inputName">Author</label>
<input type="text" id="inputName" className="form-control"
value={book.author}
/>
</div>
<div className="form-group">
<label htmlFor="inputName">Category</label>
<input type="text" id="inputName" className="form-control"
value={book.category}
/>
</div>
<div className="form-group">
<label htmlFor="inputName">Release Date</label>
<input type="date" id="inputName" className="form-control"
value={book.releasedate}
/>
</div>
<div className="form-group">
<label htmlFor="inputName">Price</label>
<input type="number" id="inputName" className="form-control"
value={book.price}
/>
</div>
<div className="form-group">
<label htmlFor="inputDescription">Description</label>
<textarea id="inputDescription" className="form-control" rows={4} defaultValue={""}
value={book.description}
/>
</div>
<div className="form-group">
<label htmlFor="inputStatus">Type</label>
<select id="inputStatus" className="form-control custom-select"
value={book.type}
>
<option selected disabled>Select one</option>
<option value="2" key="2" >Digital</option>
<option value="1" key="1" >Printed</option>
</select>
</div>
</div>
{/* /.card-body */}
</div>
{/* /.card */}
</div>
</div>
<div className="row">
<div className="col-12">
<a href="#" className="btn btn-secondary">Cancel</a>
<button type="button" className="btn btn-success float-right"
>Create</button>
</div>
</div>
<br/>
</section>
{/* /.content */}
</div>
{/* /.content-wrapper */}
</div>
)
}
export default ManageBookEdit这是错误日志
回答 2
Stack Overflow用户
发布于 2022-05-01 16:41:39
因此，您正在尝试在代码中访问props.match...和props.history...。这只有在通过<Route>组件从react-router调用/访问Compent时才有效。
我怀疑您有一个看起来有点像这样的父组件。
const Parent = () => {
return(
<>
<ManageBookView/>
<ManageBookEdit/>
</>
)
}但你真正需要的是这样：
const Parent = () => {
return(
<Router>
<Route path="managebookedit" component={ManageBookView}/>
<Route path="managebookedit/:id" component={ManageBookEdit}/>
</Router>
)
}由于您只显示组件本身，而不显示它们是如何使用的，所以很难确定，但可能存在错误。
查看如何限定组件使用您想要使用的道具的react路由器文档。
Stack Overflow用户
发布于 2022-05-02 16:55:01
问题
TypeError:无法读取editCick (ManageBookView.js:42:1) at onClick (ManageBookView.js:106:1)的未定义属性(读取“道具”)。等等在堆栈中
此错误通知您，代码试图从未定义的对象访问props，访问this.props将引发错误。ManageBookView不仅是一个React函数组件，这意味着没有定义的this来访问props对象，而且您也没有向组件提供任何props对象。
const ManageBookView = () => { ... }换句话说，即使定义了this，props也是未定义的，因此props.history会抛出类似的错误。
解决方案
将props对象提供给ManageBooView组件。
而不是
const ManageBookView = () => { ... }使用
const ManageBookView = (props) => { ... }确保此ManageBookView组件实际上正在接收线路道具 (history__、location__和match)。当ManageBookView是：
- 由路由组件直接呈现的
- 使用
withRouter高级组件进行修饰 导出默认withRouter(ManageBookView)；
现在有一个定义好的history道具。
const ManageBookView = (props) => {
...
const editClick = (id) => {
props.history.push({
pathname: '/managebookedit/' + id
});
}
...
};或者，您可以放弃props对象(如果它没有在其他地方引用)并直接使用React。
示例：
import { useHistory } from 'react-router-dom';
const ManageBookView = () => {
const history = useHistory();
...
const editClick = (id) => {
history.push({
pathname: '/managebookedit/' + id
});
}
...
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72078504
复制相关文章
相似问题
腾讯云开发者
