将动态添加的html列表项推入最后一个数组

Question

我如何将html推入最后一个数组。 我试图添加一个项目，应该立即添加到列表数组中。 鳕鱼正在工作，除了我正在努力将新列表添加到最后一个数组中。

   function addItem(id,name){

        const array = JSON.parse(localStorage.getItem('categories'));

              array.push({
             name: name,
             id:id,
      }); 

     //<li>{name}</li> push this into last array

     localStorage.setItem('categories',JSON.stringify(array));
    }


    {categories.map(function(item, key){
             return <div> 
             <ul>
                <li>item.name</li>
              </ul>
            <button onClick={() => addItem(item.id,'value name')}>Add</button>
               </div>
      })}

Answer 1

您的示例中出现了问题。 我添加了完整的示例。 您可以同时维护localStorage和State。 希望这个例子对您有所帮助。

您的错误是，在添加新项目时，您将其推送到localStoage，由于该问题，dom不会重新呈现。 您必须为此更新状态值。

 class App extends React.Component { constructor() { super(); this.state = { categories: [ { name: "Hello", id: 1 }, { name: "World", id: 2 } ] }; this.addItem = this.addItem.bind(this); this.SaveToLocalStorage = this.SaveToLocalStorage.bind(this); } SaveToLocalStorage() { const categories = this.state.categories; localStorage.setItem("categories", JSON.stringify(categories)); } addItem(id, name) { const categories = this.state.categories; categories.push({ name: name, id: id }); this.setState({ categories }); //localStorage.setItem("categories", JSON.stringify(categories)); } render() { let categories = this.state.categories; const test = categories.map(item => ( <div key={item.id}> <li>{item.name}</li> </div> )); return ( <div> {test} <button onClick={() => this.addItem(Date.now(), "Item")}> Click to Add More </button> <button onClick={() => this.SaveToLocalStorage()}> Save To LocalStorage{" "} </button> </div> ); } } ReactDOM.render( < App / > , document.getElementById("root")); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div> 

Answer 2

我想这就是您要的。 尝试将元素添加到列表/数组时，只需要将其设置为state并重新渲染即可。 我不知道为什么将其设置为本地存储，但是如果您打算仅存储先前的阵列以供将来添加，则可以直接从状态进行操作。

import React, { Component } from "react";

class App extends Component {
  state = {};
  constructor(props){
      super(props);
      this.state={
          arr = []
      }
  }
  addItem(id, name) {
    const array = JSON.parse(localStorage.getItem("categories"));
    array.push({
      name: name,
      id: id
    });
    //<li>{name}</li> push this into last array
    localStorage.setItem("categories", JSON.stringify(array));
    this.setState({arr:array});
  }
  renderList = () => {
      return this.state.array.map(function(item, key) {
        return (
          <div>
            <ul>
              <li>item.name</li>
            </ul>
            <button onClick={() => addItem(item.id, "value name")}>Add</button>
          </div>
        );
      });
  };
  render() {
    return <div>{this.renderList()}</div>;
  }
}

export default App;