React在渲染组件后重新渲染整个应用程序
问题描述:
我在我的web应用程序中使用react和redux。这是一个简单的应用程序,它有四个组件,一个减速器和三个动作。在向列表中添加一个新条目后,对列表(listItem)的呈现组件进行反应,然后重新呈现整个应用程序。渲染一个组件后重新渲染整个应用程序的原因是什么?React在渲染组件后重新渲染整个应用程序
更新时间:
应用程序容器:
class App extends Component {
static propTypes = {
groups: PropTypes.array.isRequired,
actions: PropTypes.object.isRequired
};
render() {
return (<div>
<Header addGroup={this.props.actions.addGroup} />
<List groups={this.props.groups} />
</div>
);
}
}
function mapStateToProps(state) {
return { groups: state.groups };
}
function mapDispatchToProps(dispatch) {
return { actions: bindActionCreators(AppActions, dispatch) };
}
export default connect(mapStateToProps, mapDispatchToProps)(App);
Reduser:
export default function groupDiseases(state = initialState, action){
switch (action.type) {
case ADD_GROUP:
return [
{
id: '',
name: action.name
},
...state
];
case DELETE_GROUP:
return state.filter(group =>
group.id !== action.id
);
case EDIT_GROUP:
return state.map(group => (group.id === action.id ? { id: action.id, name: action.name } : group));
default:
return state;
}
}
组件:
export default class Add extends Component {
static propTypes = {
addGroup: PropTypes.func.isRequired
}
componentDidMount() {
this.textInput.focus();
}
handleAdd =() => {
const name = this.textInput.value.trim();
if (name.length !== 0) {
this.props.addGroup(name);
this.textInput.value = '';
}
}
render() {
return (
<form className="add_form">
<input
type="text"
className="add__name"
defaultValue=""
ref={(input) => this.textInput = input}
placeholder="Name" />
<button
className="add__btn"
ref="add_button"
onClick={this.handleAdd}>
Add
</button>
</form>
);
}
}
export default class ListGroups extends Component {
static propTypes = {
groups: PropTypes.array.isRequired
};
render() {
let data = this.props.groups;
let groupTemplate = <div> Группы отсутствуют. </div>;
if (data.length) {
groupTemplate = data.map((item, index) => {
return (
<div key={index}>
<Item item={item} />
</div>
);
});
}
return (
<div className="groups">
{groupTemplate}
<strong
className={'group__count ' + (data.length > 0 ? '' : 'none')}>
Всего групп: {data.length}
</strong>
</div>
);
}
}
答
这可能是由于事实上,您让<form>
继续其默认行为,即提交到目标action
。看看W3C规范的按钮:
http://w3c.github.io/html-reference/button.html
具体而言,没有类型属性的按钮,将默认为提交。 所以你的按钮是告诉表单提交,目标是当前页面,因为没有提供。在你handleAdd
的方法,你可以这样做:
handleAdd = (event) => {
event.preventDefault(); // prevent default form submission behavior
const name = this.textInput.value.trim();
if (name.length !== 0) {
this.props.addGroup(name);
this.textInput.value = '';
}
}
或者你可以修改你的按钮已经type="button"
。
+0
非常感谢!你是对的。我没有想到它:) –
你注意到任何视觉故障?有什么问题吗? – azium
你需要更具描述性,如向我们展示组件至少 – Anup
@Anup我添加了一些片段。感谢您的帮助:) –