[英]React JS - getting a separate component to re-render when localStorage state is changed
我有兩個組件。 一個稱為“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')
);
通過在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);
// ...
},
// ...
});
這是您更正的代碼。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.