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，并且没有字符串#map

＆＃13;

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

＆＃13;

注意：遗憾的是，由于allow-same-origin政策，此示例无效。但您可以查看以下jsfiddle以查看结果：https://jsfiddle.net/Xotic750/w5z792jq/

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

1 个答案: