React To Do List, Как добавить другой элемент в массив ключей localStorage

Question

Мне удалось выяснить, как дать ключу примечания в localStorage значение со страницы addNote, но я не могу понять, как сделать так, чтобы оно создавало новое значение под ключом примечания, а непросто переназначение значения примечания.Я верю, что у меня есть либо цикл for, который будет зацикливаться на следующем индексе массива, либо оператор if исправит эту проблему и позволит добавлять элементы, однако я просто не уверен, где их разместить.Любая помощь в решении этой проблемы будет принята с благодарностью :)

Скачать файлы проекта React здесь: https://drive.google.com/drive/folders/1_P85WUmyY9QcZu14-Ib8IxAU3e4UtZCp

Ниже приведен код, который я использую для получения входного значения и добавления егок ключу заметки в файле с именем storage.js (находится в src / services / storage.js)

class AddNote extends Component {
    constructor(props) {
        super(props)

        this.state = {
            //title: [],
            //content: []
            items: []

        }

        let note = getLocalItem(keys.note);

        if(!note) {
        note = [];
        }

        this.addNote = this.addNote.bind(this);
    }

    addNote(event) {
        console.log("Working")

        if( this.theTitle.value !== "" ) {
            var newItem = {
                title: this.theTitle.value, 
                content: this.theContent.value
            };
        }



        this.setState((prevState) => {
            return {
                items: prevState.items.concat(newItem)
            };
        });



        const form = {
            title: this.state.title,
            content: this.state.content
        }




        setLocalItem('note', this.theTitle.value + " - " + this.theContent.value);

Answer 1

Вы просто не хотите добавлять следующее поле содержимого 'note' к существующему значению в localStorage ... следующий код считывает значение localStorage для componentDidMount;и затем при каждом нажатии кнопки обновляет (а не заменяет) массив localStorage ...

релевантный компонент :

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      inputs: [],
      lastInput: ''
    };
    this.click = this.click.bind(this);
  }

  componentDidMount() {
    this.getExistingArray();
  }

  getExistingArray() {
    if (localStorage.getItem('inputs')) {
      var storedInputs = localStorage.getItem('inputs');
      this.setState({ inputs: storedInputs }, function () { console.log("from localStorage We got:", this.state.inputs); });
    }
  }

  click() {
    var newInput = [...this.state.inputs, this.state.lastInput];
    localStorage.setItem('inputs', newInput);
    this.getExistingArray();
  }

  recordInput(e) {
    this.setState({ lastInput: e.target.value });
  }

  render() {
    return (
      <div>
        <input type='text' onChange={this.recordInput.bind(this)} />
        <button onClick={this.click}>Click to update the Array</button>
        <br /> Array: {this.state.inputs}
      </div>
    );
  }
}

завершено работаетstackblitz

ОБНОВЛЕНИЕ : следующая функция обновлена ​​в свете комментария опрашивающего

  click() {
    var newInput = [...this.state.inputs, this.state.lastInput];
    localStorage.setItem('inputs', newInput);
    this.getExistingArray();

    var newInputTag = 'inputs' + this.state.inputs.length;
    localStorage.setItem(newInputTag, this.state.lastInput);
  }

ОБНОВЛЕНИЕ2 : все локальные объекты хранения извлечены и напечатанына странице

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      inputs: [],
      lastInput: '',
      localStoragePairs: []
    };
    this.click = this.click.bind(this);
  }

  componentDidMount() {
    this.getExistingArray();
  }

  getExistingArray() {

    for (var i = 0; i < localStorage.length; i++) {

      var key = localStorage.key(i);
      var value = localStorage.getItem(key);

      var updatedLocalStoragePairs = this.state.localStoragePairs;
      updatedLocalStoragePairs.push({ 'keyName': key, 'valueName': value });

      this.setState({ localStoragePairs: updatedLocalStoragePairs });
    }
    console.log("complete localStoragePairs:", this.state.localStoragePairs);

    if (localStorage.getItem('inputs')) {
      var storedInputs = localStorage.getItem('inputs');
      this.setState({ inputs: storedInputs }, function () { console.log("from localStorage We got:", this.state.inputs); });
    }
  }

  click() {
    var newInput = [...this.state.inputs, this.state.lastInput];
    localStorage.setItem('inputs', newInput);
    this.getExistingArray();

    var newInputTag = 'inputs' + this.state.inputs.length;
    localStorage.setItem(newInputTag, this.state.lastInput);
  }

  recordInput(e) {
    this.setState({ lastInput: e.target.value });
  }

  render() {
    var LocalSotrageContent = this.state.localStoragePairs.map((value, index) => {
      return <tr key={index}> <td>{value.keyName}</td>  <td>{value.valueName}</td> </tr>
    });


    return (
      <div>
        <input type='text' onChange={this.recordInput.bind(this)} />
        <button onClick={this.click}>Click to update the Array</button>
        <table>
          <thead>
            <tr>
              <th>All Local Storage objects by Name</th>
              <th>All Local Storage objects by Value</th>
            </tr>
          </thead>
          <tbody>
            {LocalSotrageContent}
          </tbody>
        </table>
        <br />
      </div>
    );
  }
}