我正在构建一个简单的待办事项清单.我有一个用于添加新待办事项列表项的表单,并在其下列出待办事项列表中的所有项目.当我通过表单添加新项目时,我想刷新现有待办事项列表项目的列表.
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
Run Code Online (Sandbox Code Playgroud)
App.jsx:
class App extends Component { …Run Code Online (Sandbox Code Playgroud)