Javascript React JS-在更改localStorage状态时获取单独的组件以重新呈现

我有两个部分。一个叫做“GenerateRecipesFromList”，是一系列包含菜谱标题的“框”，另一个叫做子组件“AddButon”。现在Add按钮可以更新localStorage，但为什么它不“触发”状态更改并在父组件中重新呈现

我的代码笔是

var GenerateRecipesFromList=React.createClass({
getInitialState:函数（）{
const defaultData=[[“意大利面”、“意大利面、油、酱、帕斯利干酪”]、[“PB&J”、“PB、J”]]
const localData=JSON.parse（localStorage.getItem（'reclist'）；
返回{
reclist:localData？localData:defaultData
}
},  
render:function（）{
var testData=JSON.parse（localStorage.getItem（'reclist'）；
if（testData==null）{
setItem（'reclist'，JSON.stringify（this.state.reclist））；
}
var currentData=JSON.parse（localStorage.getItem（'reclist'）；
var行=[]；
对于（var i=0；i，通过调用
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);
    // ...
  },
  // ...
});

var GenerateRecipesFromList=React.createClass({
// ...
updateRecList:函数（reclist）{
this.setState（{reclist:reclist}）；
},
render:function（）{
// ...
返回(

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);
    // ...
  },
  // ...
});