为什么项目没有保存在 localStorage 上？

Question

正在使用 React js 开发一个简单的项目。我想要做的是将“项目”（它有一个供用户输入的输入字段）保存在 localStorage 中，目的是当用户重新加载或导航到其他组件时，该项目不会消失, 但它会在那里。

AddItem.js:

export default class AddItem extends React.Component {

  userItems;

  constructor(props) {
    super(props);

    this.state = {
      content: "",
      items: [],
    };
  }

  update(event) {
    this.setState({
      message: event.target.value,
    });
  }
  componentDidMount() {
    this.userItems = JSON.parse(localStorage.getItem('items'));

    if (localStorage.getItem('items')){
      this.setState({
        items: this.userItems.items,
        message: this.userItems.message
      })
    }else {
      this.setState({
        items: [],
        message: ""
      })
    }
  }

    componentWillUpdate(nextProps, nextState){
    localStorage.setItem('item', JSON.stringify(nextState));
  }


  handleClick() {
    var items = this.state.items;

    items.push(this.state.message);

    this.setState({
      items: items,
      content: "",
    });
  }

  handleChanged(j, event) {
    let items = this.state.items;
    items[j] = event.target.value;

    this.setState({
      items: items,
    });


  }

问题是当我在输入字段中键入一个项目并重新加载页面时，该组件根本没有显示。

在应用程序中，在本地存储中，值显示在 google inspect:

但是，一旦我导航到另一个组件或重新加载该页面，存储就会像第一次一样变空。我怎样才能让它发挥作用，以便当我导航到另一个页面时该值不会消失？

Answer 1

删除 componentWillUpdate 中的逻辑并将其移至 handleItemChanged。像这样：

export default class AddItem extends React.Component {

  userItems;

  constructor(props) {
    super(props);

    this.state = {
      content: "",
      items: [],
    };
  }

  updateMessage(event) {
    this.setState({
      message: event.target.value,
    });
  }

  handleClick() {
    var items = this.state.items;

    items.push(this.state.message);

    this.setState({
      items: items,
      content: "",
    });
  }

  handleItemChanged(i, event) {
    var items = this.state.items;
    items[i] = event.target.value;

    this.setState({
      items: items,
    });
     localStorage.setItem('items', JSON.stringify({items, message :""}));


  }



  componentDidMount() {
    this.userItems = JSON.parse(localStorage.getItem('items'));

    if (localStorage.getItem('items')){
      this.setState({
        items: this.userItems.items,
        message: this.userItems.message
      })
    }else {
      this.setState({
        items: [],
        message: ""
      })
    }
  }

  renderRows() {
    var context = this;

    return this.state.items.map(function (o, i) {
      return (
        <tr key={"item-" + i}>
           <td className="2">
                  <div>
                  <input
                  type="text"
                  value={o}
                  onChange={context.handleItemChanged.bind(context, i)}
         </tr>

为什么项目没有保存在 localStorage 上？

Why the item is not saved on the localStorage?

javascript

reactjs

local-storage