Question

我将此作为我的主要App组件，该组件可以工作，但前提是存在localStorage数据。

如果localStorage为空，我正在努力寻找一种将状态设置为空数组的方法。对此方法的任何帮助将不胜感激！我尝试了许多不同的条件语句，但是似乎没有用。

export default class App extends Component {
  constructor(props){
    super(props);
    // set variable as data from local storage
    const storageData = JSON.parse(localStorage.getItem('listItems'));
    console.log(storageData);

    // set initial state
      this.state = {
        value: '',
        url: '',
        // set items array as storage data variable
        // bug: Page only loads if localstorage available
        items: storageData
      }
    this.removeItem = this.removeItem.bind(this);
  }

Answer 1

一个简单的条件应该可以正常工作。

  this.state = {
    value: '',
    url: '',
    // If storage is not null or undefined use it,
    // otherwise use an empty array
    items: storageData || []
  }

Answer 2

localStorage.getItem('listItems')将在本地存储中不存在null的情况下返回listItems，因此您可以在解析JSON之前进行检查。

const storageData = localStorage.getItem('listItems');
const parsedStorageData = storageData ? JSON.parse(storageData) : [];

this.state = {
  value: '',
  url: '',
  items: parsedStorageData
}

如何有条件地设置组件状态

2 个答案: