reactjs和更改道具

Question

我完全不知道在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>&nbsp;&nbsp;&nbsp;                        
                        <button type='button' id="newscan_btnScan"  
                            onClick={() => { 
                            location.href = '/oldscan';
                            }}>
                            Save
                        </button>
                    </div>
                </div>
        </h1>
    );
}
}

export default Call_ebay;

我认为我正确设置了道具，但不确定。我想将appFields用作参数类，并将其作为道具传递。然后，在函数中，我希望能够填充某些appFields字段，然后希望能够在代码的render部分中渲染这些字段。

任何建议或协助都将不胜感激。

谢谢。