javascript - 刷新值反应不是动作后的值
问题描述
我在 React 工作了 2 个小时,我对作者如何正确分离组件有疑问,我有这些窗口的一个例子
当我单击“设置”按钮时,我更改了值this.state.nameFramework
,如果我在 App 组件中编写所有代码,我的 helloApp 工作但如果我在单独的组件中编写代码,它不会立即工作,而是更改变量的值this.state.nameframework 我已经重新加载了页面。
我的代码
require('normalize.css/normalize.css');
require('styles/App.css');
import React from 'react';
import InputFramework from 'components/InputFramework';
import ListPerson from 'components/ListPerson';
const list = [
{
objectID: 1,
'name': 'Vincenzo',
'surname': 'Palazzo'
},
{
objectID: 2,
'name': 'Sara',
'surname': 'Durante'
}
];
let name = 'Vincent';
let nameFramework = 'React';
class AppComponent extends React.Component {
constructor(props){
super(props);
this.state = {
list,
name,
nameFramework
};
this.onSelectPerson = this.onSelectPerson.bind(this);
this.onSubmitText = this.onSubmitText.bind(this);
this.onChangeNameFramework = this.onChangeNameFramework.bind(this);
}
onSubmitText(){
this.setState({nameFramework: this.state.nameFramework});
}
onChangeNameFramework(name){
this.state.nameFramework = name;
}
onSelectPerson(name) {
this.setState({name: name});
}
render() {
//This is no good for my programmer style, resolve it please
return (
<div className="index">
<InputFramework
name={this.state.name}
nameFramework={this.state.nameFramework}
onChange={this.onChangeNameFramework}
onClick={this.onSubmitText}
/>
<ListPerson
onClick={this.onSelectPerson}
list={this.state.list}/>
</div>
);
}
}
AppComponent.defaultProps = {
};
export default AppComponent;
输入组件
require('normalize.css/normalize.css');
require('styles/App.css');
import React from 'react';
class InputFramework extends React.Component {
constructor(props){
super(props);
}
render() {
//This is no good for my programmer style, resolve it please
//The nameFramework not update
let {onChange, onClick, name} = this.props;
return (
<div className='index'>
<h1>Hello my name is {name} and I'm learning {this.props.nameFramework}</h1>
<from>
<input type='text'
onChange={event => onChange(event.target.value)}/>
<button type='submit' onClick={() => onClick}>Set</button>
</from>
</div>
);
}
}
InputFramework.defaultProps = {};
export default InputFramework;
列表组件
require('normalize.css/normalize.css');
require('styles/App.css');
import React from 'react';
class ListPerson extends React.Component {
constructor(props){
super(props);
}
render() {
//This is no good for my programmer style, resolve it please
const {onClick, list} = this.props;
return (
<div className="index">
<ul>
{list.map(function(item){
return (
<li key={item.objectID}>
{item.name}
<button type='button' onClick={() => onClick(item.name)}>Select</button>
</li>
)
})}
</ul>
</div>
);
}
}
ListPerson.defaultProps = {
};
export default ListPerson;
我这是如何编写代码的问题,现在我问你你比我更有经验,你能帮我解惑。
解决方案
您正在尝试直接在 onChangeNameFramework 处理程序中更改(变异)状态。
直接改变状态会导致错误。
State 必须只能通过 this.setState 来改变,所以它必须是这样的:
onChangeNameFramework(name){
this.setState({
nameFramework: name
})
}
这是文档:
https://reactjs.org/docs/state-and-lifecycle.html#do-not-modify-state-directly
另一个问题是在 InputFramework 组件中,当您提交页面重新加载的表单时,为了防止它,您应该像这样添加 e.preventDefault() :
class InputFramework extends React.Component {
render() {
//This is no good for my programmer style, resolve it please
//The nameFramework not update
let {onChange, onClick, name} = this.props;
const handleClick = (e) => {
e.preventDefault();
onClick();
}
return (
<div className='index'>
<h1>Hello my name is {name} and I'm learning {this.props.nameFramework}</h1>
<form>
<input type='text'
onChange={event => onChange(event.target.value)}/>
<button type='submit' onClick={handleClick}>Set</button>
</form>
</div>
);
}
}
最后,在 AppComponent 中,以下代码是多余的,因为您设置的是相同的状态:
onSubmitText(){
this.setState({nameFramework: this.state.nameFramework});
}
您已经在 onChangeNameFramework 处理程序中处理了框架名称的更改。
我认为在这里同时使用 onSubmitText 和 onChangeNameFramework 处理程序似乎是不必要的,只有其中一个就足够了。
操场:
推荐阅读
- php - 使用ajax向php脚本发送数据的问题
- arrays - 比较 PowerShell 中的两个数组不起作用
- vb.net - ListBox 的 SelectedValue 属性在绑定到 Linq to Entity 查询的结果时返回错误值
- laravel - 如何在 laravel 中允许长的自动完成搜索列表
- wso2 - WSO API Manager 概念中的货币化和计费
- python - 避免在 Python 中的函数内进行重复的大数组计算
- spring-boot - 如何在不停机的情况下重新部署springboot应用程序
- javascript - Chrome 不断将我的 mvc 视图自动滚动到顶部
- postgresql - ANY/ALL (array) 不支持设置参数
- sql - Spring数据@Query原生请求