我完全不知道在reactJS中使用道具。我有一个包含以下代码的页面:
import React from 'react';
class Call_ebay extends React.Component {
constructor(props) {
super(props);
this.state = {
error_message: "",
barcode: "",
product_name: "",
product_name_1: "",
product_description_1: "",
product_image_1: "",
product_price_1: "",
}
this.searchJRS.bind(this);
}
searchJRS = (props) => {
function valuesToArray(obj) {
return Object.keys(obj).map(function (key) { return obj[key]; });
}
let url = "https://cors-anywhere.herokuapp.com/http://svcs.ebay.com/services/search/FindingService/v1";
url += "?OPERATION-NAME=findItemsByKeywords";
url += "&SERVICE-VERSION=1.0.0";
url += "&SECURITY-APPNAME=jonathan-wmjw-PRD-5262ede01-60b402b1";
url += "&GLOBAL-ID=EBAY-US";
url += "&RESPONSE-DATA-FORMAT=JSON";
url += "&keywords=" + this.state.product_name;
url += "&paginationInput.entriesPerPage=3";
var productName = decodeURI(this.state.product_name);
this.state.product_name = productName;
const options = { method: 'GET' };
fetch( url, options)
.then(function(response) {
if (response.status >= 400)
{
this.state.error_message = "eBay returned bad status of: " + response.status;
}
return response.json();
})
.then(function(myJson) {
if (myJson == undefined)
{
console.log("myJson = undefined");
this.state.error_message = "eBay was unable to find a match on " + productName + ". That is the name our bar code service returned. If you want, you can try entering a different product name for eBay to try.";
}
else
{
//inspect the data that the WebAPI returned
var productsReturned = myJson.findItemsByKeywordsResponse[0].searchResult[0];
var newArray = [];
newArray = valuesToArray(productsReturned);
var numberOfProducts = newArray[0];
var product = {
name: "",
image: "",
description: "",
price: ""
}
if (numberOfProducts > 0) {
for (var r=0;r<numberOfProducts;r++){
console.log(newArray[1][r]);
product.name = newArray[1][r].title;
var priceArray = [];
priceArray = valuesToArray(newArray[1][r].sellingStatus[0].currentPrice[0]);
this.state.error_message = "We found your product on eBay. If you wish to save this product, check the box and click on the Save button.";
product.price = priceArray[1];
product.image = newArray[1][r].galleryURL;
this.state.product_name_1 = product.name;
this.state.product_price_1 = product.price;
this.state.product_image_1 = product.image;
}
}
}
});
}
render() {
var queryString = window.location.search;
this.appFields.product_name = queryString.substring(1);
this.searchJRS(this.appFields);
ReactDOM.return (
<h1>
{this.state.error_message}
<label>{this.state.product_name}</label><br />
<img src="{this.state.product_image_1}" />
<label>{this.state.product_name_1}</label>
<label>{this.state.product_description_1}</label>
<label>{this.state.product_price_1}</label><br />
<label>{this.state.error_message}</label><br />
<div id="scanner-container"></div>
<div id="flex-container">
<div id="row">
<button type='button' id="newscan_btnStartScan">Start the Scanner</button>
<button type='button' id="newscan_btnScan"
onClick={() => {
location.href = '/oldscan';
}}>
Save
</button>
</div>
</div>
</h1>
);
}
}
export default Call_ebay;
我认为我正确设置了道具,但不确定。我想将appFields用作参数类,并将其作为道具传递。然后,在函数中,我希望能够填充某些appFields字段,然后希望能够在代码的render部分中渲染这些字段。
任何建议或协助都将不胜感激。
谢谢。