Question

所以我正在尝试为我的商店应用创建搜索栏功能。它接受用户输入的字符串，并使用API在数据库中搜索。 API返回JSON，Im从中提取一些值（id），然后将其映射以创建用于搜索项的API链接。看起来像这样：

function get_data () {
let myObj = (JSON.parse(this.responseText));
let id_array = myObj.map(item => 'http://localhost:3005/' + item.id);
console.log(id_array);
}

var oReq = new XMLHttpRequest();
oReq.addEventListener("load", get_data);
oReq.open("GET", "http://localhost:3005/products");
oReq.send();

当我将其放置为控制台时，输出[console.log（id_array）]完全符合预期：

(10) ["http://localhost:3005/774944", "http://localhost:3005/774945", "http://localhost:3005/774946", "http://localhost:3005/123581", "http://localhost:3005/782691", "http://localhost:3005/782485", "http://localhost:3005/782486", "http://localhost:3005/782487", "http://localhost:3005/782488", "http://localhost:3005/738471"]
0: "http://localhost:3005/774944"
1: "http://localhost:3005/774945"
2: "http://localhost:3005/774946"
...
9: "http://localhost:3005/738471"
length: 10
__proto__: Array(0)

这是问题所在：我希望使用id_array渲染组件，并且我已经有一个可以正常工作的组件：

let ChoosePage = (i) => {
ReactDOM.unmountComponentAtNode(document.getElementById('items'))
let urls = [
    'http://localhost:3005/products/774944', 
    ...
    'http://localhost:3005/products/782488',
    'http://localhost:3005/products/738471'];
let urls_sliced = urls;
if (i === 0) {
     urls_sliced = urls.slice(0, 4);
 } else if (i === 1) {
     urls_sliced = urls.slice(4, 8);
 } else if (i === 2) {
     urls_sliced = urls.slice(-2);
 }
 let show_items = () => {
    ReactDOM.render(urls_sliced.map((url)=>{
            return(
              <Item url={url}/>
            )
            }), document.getElementById('items'));
        }
    show_items()
}

这是没有问题的工作，但我无法与[id_array]而非[urls]一起使用。我没有使用输入选项ye，它现在应该只显示静态结果。这就是我现在拥有的：

let ShowResults = () => {
let myObj = (JSON.parse(this.responseText));
let id_array = myObj.map(item => 'http://localhost:3005/products/' +   item.id);
ReactDOM.render(id_array.map((url)=>{return(<Item url={url}/>)}), document.getElementById('items'));
}

let oReq = new XMLHttpRequest();
oReq.addEventListener("load", ShowResults);
oReq.open("GET", "http://localhost:3005/products?q=lc");
oReq.send();

export default ShowResults;

显示结果应通过onClick事件（在我的App.js文件中）调用，如下所示：

const search_box = (
<SearchBox>
<Icon onClick={e=>{ShowResults()}} >search</Icon>
<InputArea placeholder={'Search...'} id="input_value"></InputArea>
</SearchBox>
);

const App = () => {
return (
[nav_bar, pagination, search_box, cart_items]
);
};

但仅将此功能添加到onClick事件中会使整个应用崩溃：

TypeError: Cannot read property 'responseText' of undefined

函数似乎在获取API结果之前尝试执行，但是为什么呢？任何细微的提示将不胜感激

使用映射数组作为API链接列表进行反应

0 个答案: