Question

当我运行此代码时，我会为本地存储中的每个配方项创建一个引导面板组。当我尝试删除配方时，有时会删除正确的配方，有时则不会。控制台显示正确的配方已从本地存储中删除，但由于某种原因，当应用程序组件重置其状态时，将删除错误的配方。我注意到如果我尝试从下往上删除食谱，它就可以了。但是，如果我点击第一个食谱，则删除底部食谱。

我知道这很容易解决，但我需要一个全新的视角。感谢大家！另外，对不起代码中缺少缩进 - 堆栈溢出对间距

不太友好

class App extends Component {
  constructor() {
  super();
  this.deleteRecipe = this.deleteRecipe.bind(this)
  this.state = {
    recipeData: JSON.parse(localStorage.getItem('recipeData'))
 }
}

deleteRecipe() {
this.setState({recipeData: JSON.parse(localStorage.getItem('recipeData'))})
}

render() {
 return (
  <div className="App">
    <div className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      <h2>Welcome to React Recipe Box!</h2>
    </div>

    <div className="container">
      {this.state.recipeData.map(recipe => {
        return (
        <Recipe name={recipe.name} ingredients={recipe.ingredients} deleteRecipe={this.deleteRecipe}/>
        )
      })}
    </div>
  </div>
);
}
}

class Recipe extends Component {
 constructor() {
 super();
  this.onDeleteRecipe = this.onDeleteRecipe.bind(this)
 }

componentWillMount(){   //set state when component is about to mount
this.state = {
  name: this.props.name,
  ingredients: this.props.ingredients,

}
}

onDeleteRecipe() {
var recipeList = JSON.parse(localStorage.getItem('recipeData'));
for(var i = 0; i < recipeList.length; i++) {
  if(recipeList[i].name === this.state.name) {
    recipeList.splice(i, 1);
    console.log("Deleted " + this.state.name, recipeList);
    localStorage.removeItem('recipeData');
    localStorage.setItem('recipeData', JSON.stringify(recipeList));

    this.props.deleteRecipe();
  }
 }

}

 render() {
 return (
 <div>
  <div className="panel-group">
    <div className="panel panel-primary">
      <div className="panel-heading">
        <h2 className="panel-title">
          <a data-toggle="collapse" data-target={'#' + (this.state.name).replace(/\s/g, '')} href={'#' + (this.state.name).replace(/\s/g, '')}>
             {this.state.name}
          </a>
        </h2>>              
      </div>
     <div id={(this.state.name).replace(/\s/g,'')} className="panel-collapse collapse">
      <div className="panel-body"> 
          {this.state.ingredients.map(ingredient => {
            return <li className="list-group-item">{ingredient}</li>
          })}
          <div className="btn-group">
            <button className="btn btn-sm btn-info" data-toggle="modal" 
                    data-target={'#' + (this.state.name).replace(/\s/g, '') + 'EditModal'}>Edit</button>
            <button className="btn btn-sm btn-danger" data-toggle="modal"
                    data-target={'#' + (this.state.name).replace(/\s/g, '') + 'RemoveModal'}
                    >Delete</button>
          </div>
      </div>
     </div>
    </div>
  </div>


    <div className="modal modal-lg" id={(this.state.name).replace(/\s/g, '') + 'EditModal'} >
        <div className="modal-content">
          <div className="modal-header">
            <h2>Edit {this.state.name}</h2>
          </div>
          <div className="modal-body">
            <ul className="list-group list-unstyle">
              {this.state.ingredients.map( ingredient => {
                return <li className="list-group-item">{ingredient}</li>
              })}
            </ul>
          </div>
          <div className="modal-footer">
            <div className="btn-group">
              <button className="btn btn-sm btn-info"  data-dismiss="modal">Save</button>
              <button className="btn btn-sm btn-danger" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>


      <div className="modal modal-lg" id={this.state.name.replace(/\s/g, '') + 'RemoveModal'}>
        <div className="modal-content">
          <div className="modal-body">
            <h3>This will remove the selected recipe. Are you sure?</h3>
          </div>
          <div className="modal-footer">
            <div className="btn-group">
              <button className="btn btn-sm btn-danger" data-dismiss="modal" onClick={this.onDeleteRecipe}>Delete</button>
              <button className="btn btn-sm btn-info" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>
 </div>
);
}
}

export default App;

Answer 1

我还是个新手，但是......几个月前我为FreeCodeCamp建了一个反应食谱盒，所以我把它拉起来比较我的删除功能。

我注意到你对待localStorage的方式与我的方式不同。（不是我的方式是最好的，甚至是正确的！）我想知道问题是否根植于那个设计。你的删除功能进入localStorage并进行更改，然后你运行一个setState来重新获取recipeData，如果我正在读的那么？

相比之下，我的app从localStorage声明了一个变量，我将this.state.recipeArray设置为等于该变量。然后，我的所有编辑/添加/删除功能都会更改this.state.recipeArray，而不是 localStorage。像这样排序：

handleDelete: function(e) {
    e.preventDefault();

    var replacementRecipeArray = this.state.recipeArray.filter((recipe) => recipe.title !== e.target.name);
    //dot-filter with ES6 fat-arrow returns all items where title doesn't match the one we clicked; IOW, it removes the one we want to delete

    this.setState({
      recipeArray: replacementRecipeArray
    });

  }

为了将this.state.recipeArray的任何更改返回到localStorage，我每次呈现页面时都会执行localStorage.setItem。

render() {
    //first save current array to localstorage - wasn't reliable anywhere else
    localStorage.setItem("_shoesandsocks_recipes", JSON.stringify(this.state.recipeArray));

    //render page
    return (
      <div className="App">
        <div className="recipeContainer"> 
          // etc etc

就我所知，这是一个疯狂的设计，但它确实有效。

React：根据本地存储设置状态

1 个答案: