Reactjs搜索 - 從sessionStorage的獲取數據和地圖通過它

我試圖創建一個使用反應搜索在Reactjs搜索過濾器。我需要將保存到sessionStorage中的數據進行搜索。我的問題是，我認爲我沒有正確地映射數據或正確設置ID。當我在搜索框中輸入時，我發現一個錯誤，說items.map不是一個函數。我需要知道我應該放什麼東西在我的getItemsAsync功能，這樣我可以正確地抓住從sessionStorage的數據，並通過它映射。請在解決方案中張貼代碼示例。Reactjs搜索 - 從sessionStorage的獲取數據和地圖通過它

class TestComponent extends Component { 

constructor(props){ 
    super(props); 
    this.state = { 
     repos: [], 
    } 
} 

HiItems(items) { 
    console.log(items); 
    console.log(sessionStorage.getItem('List')); 
} 

getItemsAsync(searchValue, cb) { 
    let items = sessionStorage.getItem('List'); 
     items.map(
     (i, data) => { return { id: i , value: data.List }}) 

     this.setState({ repos: items }); 
     cb(searchValue) 
} 

render() { 
return (
    <div> 
    <Search items={this.state.repos} 
      multiple={true} 
      getItemsAsync={this.getItemsAsync.bind(this)} 
      onItemsChanged={this.HiItems.bind(this)} /> 
    <ul id="result"> {this.getItemsAsync} </ul> 
    </div> 
) 
} 
} 
    export default TestComponent;

來源

2017-08-06 ChloeH

如果你在debbuging模式查詢sessionStorage.getItem（「列表」）會發生什麼？你有什麼價值嗎？ –

[sessionStorage的]（https://developer.mozilla.org/en/docs/Web/API/Window/sessionStorage）將數據存儲爲字符串。使用[JSON]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON）以字符串化和解析您的數據。 – Xotic750

sessionStorage將數據存儲爲字符串。使用JSON來對數據進行串聯和解析。所以，你得到的錯誤，因爲item是一個字符串或undefined，並沒有串＃地圖

const list = [1, 2, 3]; 
 
sessionStorage.setItem('List', JSON.stringify(list)); 
 
const result = JSON.parse(sessionStorage.getItem('List')); 
 
console.log(result);

NB：很不幸的例子在這裏不因allow-same-origin政策工作。但是你可以看看下面的jsfiddle看到的結果：https://jsfiddle.net/Xotic750/w5z792jq/

來源

2017-08-06 14:30:57 Xotic750

OP也沒有存儲'map' – Tony

真實的結果，而不是拋出錯誤的原因。 – Xotic750

Reactjs搜索 - 從sessionStorage的獲取數據和地圖通過它

回答

相關問題