React JS - 在 localStorage 状态改变时获取一个单独的组件来重新渲染

Question

我有两个组件。 一个称为“GenerateRecipesFromList”，是一系列包含食谱标题的“框”，另一个是子组件，称为“AddButon”。 现在 Add 按钮可以更新 localStorage，但为什么它不会“触发”父组件中的状态更改和重新渲染？

我的 CodePen在这里

var GenerateRecipesFromList= React.createClass({
    getInitialState: function(){
      const defaultData = [["Spaghetti", "pasta, oil, sauce, parsely, cheese"], ["PB&J", "PB, J"]]
      const localData = JSON.parse(localStorage.getItem('reclist'));
      return {
        reclist: localData ? localData : defaultData
      }
  },  
  render: function(){
    var testData = JSON.parse(localStorage.getItem('reclist'));
    if(testData === null){
        localStorage.setItem('reclist', JSON.stringify(this.state.reclist));
        }
        var currentData = JSON.parse(localStorage.getItem('reclist'));
        var rows = [];
          for(var i=0; i<currentData.length; i++){
        var thedivname = i;
          rows.push(<div id= {this.thedivname} className="individual"> <span><h2>{this.state.reclist[i][0]}</h2></span> 
        </div>);
        }
      return(
        <div className="centerMe">
          <AddButton />
          {rows}
        </div>
      );
    },
});

var AddButton = React.createClass({

      overlayAdd: function() {
        var el = document.getElementById("overlay");
      el.style.visibility = (el.style.visibility === "visible") ? "hidden" : "visible";
      },

      exposeAddRecipe: function(){
          var exposeCurrentData = [];
          var userInput = [];
          exposeCurrentData = JSON.parse(localStorage.getItem('reclist'));
         var newTitle = document.getElementById("title").value;
         var newIngredients = document.getElementById("ingredients").value;

         userInput.push(newTitle);
         userInput.push(newIngredients);
         exposeCurrentData.push(userInput);
          localStorage.setItem('reclist', JSON.stringify(exposeCurrentData));
          this.setState({ reclist: exposeCurrentData});
         this.overlayAdd();
      },

      render: function(){
      return(
        <div>
          <button type="button" id="btnAdd" onClick={this.overlayAdd}>Add a New Recipe</button> 
            <div id="overlay">
             <div>
            <form > 
             <p>Add a new recipe.</p>
             Recipe Title: <input type="text" name="title" id="title" /><br/>
             Ingredients: <input type="text" name="ingredients" id="ingredients" /><br/>
           <button type="button" className="normalBtn" onClick={this.exposeAddRecipe}>Save</button>
           </form>
           <p>Click here to <a href='#' onClick={this.overlayAdd}>close</a></p>

          </div>
        </div> 
      </div>
      );
     }
  });

   var Footer = React.createClass({
   render() {
    return (
      <footer>
        <div id="containerfooter">
          <p>Written by <a  href="http://codepen.io/profaneVoodoo/full/dXBJzN/">John Gillespie</a> for  FreeCodeCamp Campers. Happy Coding!</p>
    </div>
      </footer>
    );
  }
  });


var MyApp = React.createClass({  
  render: function() {
    return(
      <div className = "mainDiv">
         <div className="titleDiv">
       <h1>Recipe Box</h1>

           <GenerateRecipesFromList />
          <Footer />
         </div>        
       </div>
   );
 }, 
}); 

ReactDOM.render(
  <MyApp />,
  document.getElementById('Recipes')
);

Answer 1

通过在AddButton组件中调用setState ，您将更新此组件的状态而不是父组件的状态。

要更新父组件的状态，请在父组件中定义一个函数并将其传递到AddButton的 props 中。 然后你可以在AddButton调用这个函数来更新GenerateRecipesFromList的状态。

var GenerateRecipesFromList = React.createClass({
  // ...
  updateRecList: function (reclist) {
    this.setState({ reclist: reclist });
  },
  render: function(){
    // ...
    return(
      <div className="centerMe">
        <AddButton updateRecList={ this.updateRecList } />
        { /* ... */ }
      </div>
    );
  },
});

var AddButton = React.createClass({
  // ...
  exposeAddRecipe: function(){
    // ...
    this.props.updateRecList(exposeCurrentData);
    // ...
  },
  // ...
});

这是您更正的代码。