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;

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

2 个答案: