Reactjs Search - 从 sessionStorage 获取数据并通过它进行映射

Question

我正在尝试使用 react-search 在 Reactjs 中创建一个搜索过滤器。我需要获取保存到 sessionStorage 的数据并通过它进行搜索。我的问题是我认为我没有正确映射数据或正确设置 id。当我在搜索框中输入时，我会抛出一个错误，指出 items.map 不是函数。我需要知道我应该在我的 getItemsAsync 函数中放入什么，以便我可以正确地从 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; 

Answer 1

sessionStorage 将数据存储为字符串。使用JSON 对数据进行字符串化和解析。所以你得到错误是因为item是一个字符串或undefined，并且没有String#map

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

注意：不幸的是，由于allow-same-origin 政策，该示例在此处不起作用。但是你可以看下面的jsfiddle看看结果：https://jsfiddle.net/Xotic750/w5z792jq/