我正在建立一个简单的待办事项清单。我有一个用于添加新的待办事项列表项的表单,在该表单下列出了待办事项列表中的所有项。通过表单添加新项目时,我想刷新现有待办事项列表项目的列表。
Items.jsx:
class Items extends React.Component {
constructor(props) {
super(props);
this.state = {
items: [],
loading: true
};
}
componentDidMount() {
axios.get('/api/v1/items')
.then(response => {
this.setState({ items: response.data, loading: false });
});
console.log('state.items: '+this.state.items);
}
componentDidUpdate() {
axios.get('/api/v1/items')
.then(response => {
this.setState({ items: response.data, loading: false });
});
console.log('componentDidUpdate: '+this.state.items);
}
render() {
return (
<ItemSE.Group>
{
this.state.items.map(item => {
return <Item key={item.id} data={item} />
})
}
</ItemSE.Group>
);
}
}
export default Items
App.jsx:
class App extends Component {
constructor () {
super();
this.state = {
item_msg: ''
}
this.handleInputChange = this.handleInputChange.bind(this);
}
handleSubmit(e){
e.preventDefault();
console.log(this.state.item_msg);
axios.post('/api/v1/items', {
item: this.state.item_msg
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
handleInputChange(e) {
this.setState({ item_msg: e.target.value });
console.log('item_msg: '+this.state.item_msg);
}
render() {
return (
<div className="App">
<MainHeaderr />
<Container>
<NewItemForm
send_form={this.handleSubmit.bind(this)}
onInputChange={this.handleInputChange}
typed={this.state.item_msg} />
<Items />
</Container>
</div>
);
}
}
export default App;
我添加componentDidUpdate
到Items.jsx
文件中-当我添加新的待办事项列表时,这个新的待办事项确实会立即显示在列表中-
很酷。但是,我并不是真的认为这是最佳做法。当我看着JS控制台时,看到了数百个componentDidUpdate:
。
因此,刷新待办事项列表的最佳方法是什么?
对于新手来说,这是最具挑战性的部分之一ReactJS
。您不应该在每个级别上创建有状态组件。
选择州的共同所有者。在您的情况下Items
,没有上级App
组件的数据,组件本身无法更改其状态,因此没有理由将状态保持在该位置。
基本上,您应该将items
数组和isLoading
标志保留在App
组件中,然后将其Items
作为道具简单地传递给。
然后,您可以通过在后端添加新项后重新获取数据来更新列表,也可以将其添加到列表中。
另外,您应该App
在每次输入更改时更新父级的状态。
有两种方法:
您可以使其保持NewItemForm
状态,然后将onSubmit作为函数prop传递到父事件处理程序中。
只是使其不可控制,根本不要保持它的状态,父级将继承此参数event.target.value
。(现在)。
在两种情况下,它都不会每次都重新呈现您的列表。因此,您应该省略handleInputChange
from App
组件。
例如: App.js
constructor(props) {
super(props);
// Initial state
this.state = {
items: [],
isLoading: false,
}
}
handleSubmit(e){
e.preventDefault();
const { value } = e.target;
this.setState({ isLoading: true });
axios.post('/api/v1/items', {
item: value
})
.then(response => {
// there are several ways - choose ONE of them
// 1. If server returns you the created item
// you can just add this item into the list
this.setState(prevState => {
return {
items: [...prevState.items, response.data],
isLoading: false,
}
});
// 2. But if there are any users who can make changing simultaneously with you
// (if not - just imagine it :) ) - it's better to make re-fetch data from server
axios.get('/api/v1/items')
.then(response => {
this.setState(prevState => ({ items: response.data, isLoading: false });
})
.catch(err => { console.log('Something bad is happened:', err) });
}
最后,只需将数据传递到您的Items
组件中即可。
render() {
const { items, isLoading } = this.state;
return (
...
<Items items={items} isLoading={isLoading} />
...
)
}
如果您尚未阅读本文,建议您阅读这篇文章-https: //reactjs.org/docs/thinking-in-
react.html
。
希望能帮助到你。
我正在开发Spring Boot Rest应用程序。ORMHibernate。我在DB中有更新相关实体的endpoint,例如,我有表“form”和表“rows”,每一行都附加到表单,所以一个表单可以包含表“rows”中的多行,每一行都有指向“form”的链接。 用例:我们正在获取要保存的行列表 其中一些新so is不包含ID 最好的方法是手动处理所有这些情况吗?或者是否有任何ORM/Spring
嗨,我正在开发一个与Express API通信的React应用程序。我试图实现JWT认证,但我不知道当jwt到期时会发生什么。如果用户在令牌过期时被注销,这似乎不是很用户友好。 我应该使用刷新令牌吗?正如node-jsonwebTokens包留档中所说。这可能不是最好的方法。 我应该在对服务器的每个请求中创建一个新的jwt吗?如果用户长时间阅读一篇文章而不做任何请求,他将被注销。 也许我错了,最好
问题内容: 我想使用JavaScript 重新加载。到目前为止,我发现的最好方法是将iframe的属性设置为其自身,但这并不是很干净。有任何想法吗? 问题答案: 注意,在Firefox中,不能通过id进行索引,而只能通过名称或索引进行索引
问题内容: 这是一个非常简单的程序: 这是我期望的输出: 但是我得到了这个: 真的有我不来的东西! 问题答案: 你必须做 不 现在可以正常工作: 当您执行类似操作时,您会在一个列表中三次获得相同的列表。 相同的 意思是,当您更改其中之一时,您也会更改所有它们(因为只有一个列表被引用了3次)。 您需要创建三个独立的列表来解决此问题。您可以通过列表理解来做到这一点。您在此处构造一个由独立的空列表组成的
我正在做我的第一个react项目,我有一个问题。 使用,在react中处理和存储数据的最佳方法是什么? 我当前的工作流程: 在 将数据存储在(例如在中作为子对象` 使用控件的属性中的数据,如
我对拉雷维尔还不太熟悉。我有一个基本问题,在laravel中添加常量的最佳方法是什么。我知道我们用来添加常量的.env方法。我还制作了一个常量文件,用于我的项目。例如: 等等它最多可以达到100条或更多记录。那么,编写常量的最佳方法应该是什么呢。.env方法。还是添加constant.php文件? 谢啦
我理解如何(以及为什么)在JSX中添加空白,但我想知道什么是最佳实践,或者是否有任何真正的区别? 将两个元素都包裹在一个跨度中 将它们添加到一行中 用JS添加空间
我有一个函数,可以为传入的用户数组(使用 RSA 算法)生成密钥对,它似乎为每个用户正确生成密钥并将它们添加到数组列表中。但是,当我尝试打印输出时,它似乎只打印最后一个元素。似乎无法弄清楚我做错了什么。 下面是生成密钥并返回数组列表的函数:-它将用户的字符串数组作为参数。 这是我如何测试它:- 我收到的输出是