[英]How do I update state with axios put request on my React application? (React/Node Express)
I've been reviewing my HTTP/AJAX project and was able to implement my get, post and delete.我一直在审查我的 HTTP/AJAX 项目,并且能够实现我的获取、发布和删除。 But I tried to implement the put request on my own and have been stuck on it for two days (I know).但是我试图自己实现 put 请求并且已经坚持了两天(我知道)。
My understanding is that there should be the axios request in an event handler, and then you bind the handler.我的理解是在事件处理程序中应该有 axios 请求,然后你绑定处理程序。 My put request has the id and is updating, but the id (friend.id) is only replaced by an empty string.我的 put 请求具有 id 并且正在更新,但 id (friend.id) 仅被空字符串替换。 Put request is working in the server and updates the data correctly.放置请求在服务器中工作并正确更新数据。 So I see my problem is in React.所以我看到我的问题出在 React 中。
I looked up help guides on editing state and applying it to the put request.我查找了有关编辑 state 并将其应用于 put 请求的帮助指南。 I initialized editing: false
as state, made a handler for setting editing to true and did an onChange on each input in the form for editing at the bottom.我初始化了editing: false
为 state,制作了一个用于将编辑设置为真的处理程序,并对底部编辑表单中的每个输入进行了 onChange。 But I see that I'm not understanding how the handleUpdating event handler should connect with put (I commented them below), or if I needed it.但是我发现我不理解 handleUpdating 事件处理程序应该如何与 put 连接(我在下面评论了它们),或者如果我需要它。
Here is my file hierarchy:这是我的文件层次结构:
Here is the server's put request (located in server.js):这是服务器的 put 请求(位于 server.js 中):
app.put('/friends/:id', (req, res) => {
const { id } = req.params;
let friendIndex = friends.findIndex(friend => friend.id == id);
if (friendIndex >= 0) {
friends[friendIndex] = { ...friends[friendIndex], ...req.body };
res.status(200).json(friends);
} else {
res
.status(404)
.json({ message: `The friend with id ${id} does not exist.` });
}
});
And here is the code in my React Application (located in Friendslist.js):这是我的 React 应用程序中的代码(位于 Friendslist.js 中):
import React from 'react';
import axios from 'axios';
const API_URL = 'http://localhost:5000/friends';
class FriendsList extends React.Component {
constructor() {
super();
this.state = {
friends: [],
editing: false,
loading: true,
showComponent: false,
name: '',
age: '',
email: ''
}
}
componentDidMount() {
axios
.get(`${API_URL}`)
.then(response => {
console.log(response.data);
this.setState({ friends: response.data, loading: false });
})
.catch(error => {
console.log('There was an error', error);
})
}
onClickComponent = () => {
this.setState({ showComponent: true });
}
handleName = (event) => {
event.preventDefault();
this.setState({
name: event.target.value
});
}
handleAge = (event) => {
event.preventDefault();
this.setState({
age: event.target.value
});
}
handleEmail = (event) => {
event.preventDefault();
this.setState({
email: event.target.value
});
}
// handleUpdating - setting edit to true
handleUpdating = (event) => {
this.setState({ editing: true })
}
onClickComponent = () => {
this.setState({ showComponent: true });
}
handleDelete = (id) => {
axios
.delete(`${API_URL}/${id}`)
.then(response => {
this.setState({
friends: response.data
})
console.log(response.data)
})
.catch(error => {
console.log(error)
})
};
handleSubmit = (event) => {
event.preventDefault();
axios.post(`${API_URL}`, {
name: this.state.name,
age: this.state.age,
email: this.state.email
})
.then(response => {
this.setState({ friends: response.data });
})
.catch(error => {
console.log(error);
});
}
// This is the put request
handleEdit = (id) => {
axios.put(`${API_URL}/${id}`, {
name: this.state.name,
age: this.state.age,
email: this.state.email
})
.then(response => {
this.setState({ friends: response.data });
})
.catch(error => {
console.log(error);
});
}
render() {
if (this.state.loading) {
return <h1>Loading Friends....</h1>
} else if (!this.state.loading) {
return (
<div>
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.name} onChange={this.handleName} />
</label>
<label>
Age:
<input type="text" value={this.state.age} onChange={this.handleAge} />
</label>
<label>
Email:
<input type="text" value={this.state.email} onChange={this.handleEmail} />
</label>
<input type="submit" value="Submit" />
</form>
<div>{this.state.friends.map((friend) => {
return (
<div onChange={() => this.handleUpdating} key={friend.id} className="friend">
<div className="friend-name">{friend.name}</div>
<div className="friend-age">{`Age: ${friend.age}`}</div>
<div className="friend-email">{`Email: ${friend.email}`}</div>
<button onClick={() => this.handleDelete(friend.id)}>Delete</button>
<button onClick={this.onClickComponent}>Edit</button>
{this.state.showComponent ? <Form handleEdit={() => this.handleEdit(friend.id)} /> : null}
</div>
);
})}
</div>
</div>
);
}
}
}
const Form = (props) => {
return (
<form onSubmit={() => props.handleEdit(props.id)}>
<label>
Name: <input type="text" value={props.name} onChange={this.handleUpdating} />
</label>
<label>
Age: <input type="text" value={props.age} onChange={this.handleUpdating} />
</label>
<label>
Email: <input type="text" value={props.email} onChange={this.handleUpdating} />
</label>
<input type="submit" value="Update" />
</form>
);
}
export default FriendsList;
I appreciate any help and/or feedback我感谢任何帮助和/或反馈
enter code here
import { connect } from 'react-redux';
import api from '../../services/api';
import * as actions from '../../store/actions';
updateTool = (id) => {
console.tron.log('edit !!!');
this.setState({ isEdit: true });
const modifyTool = {
id: this.props.id,
title: this.state.title,
link: this.state.link,
description: this.state.description,
tags: this.state.tags,
};
api
.put(`/tools/${id}`, modifyTool)
.then((res) => {
console.log(res.data);
})
.catch((error) => {
console.log(error);
});
};
{/* form Modal Update */}
<section>
<Modal
visible={this.state.showModal}
width="400"
height="370"
effect="fadeInUp"
onClickAway={() => this.closeModal()}
>
<FormModal>
<form onSubmit={this.updateTool}>
<div>
<span>Update tool</span>
<label>Tool Name</label>
<input
type="text"
onChange={this.handleChange}
value={tool.title}
name="title"
/>
<label>Tool Link</label>
<input
type="text"
onChange={this.handleChange}
value={this.props.link}
name="link"
/>
<label>Tool description</label>
<textarea
cols={20}
rows={5}
name="description"
onChange={this.handleChange}
value={this.state.description}
/>
<label>Tags</label>
<input
type="text"
onChange={this.handleChange}
value={this.state.tags}
name="tags"
/>
</div>
<AlignHorizontalRight>
<button>Cancel</button>
<div>
<input
type="button"
value="EDIT"
type="submit"
onClick={() => this.updateTool(tool.id)}
/>
</div>
</AlignHorizontalRight>
</form>
</FormModal>
</Modal>
</section>
const mapDispatchToProps = dispatch => ({
removeTool: (id) => {
dispatch(actions.removeTool(id));
},
updateTool: (id, title, link, description, tags) => {
dispatch(actions.updateTool(id, title, link, description, tags));
},
});
export default connect(
null,
mapDispatchToProps,
)(Content);
actions/index.js动作/index.js
export const ADD_TOOL = 'ADD_TOOL';
export const REMOVE_TOOL = 'REMOVE_TOOL';
export const UPDATE_TOOL = 'UPDATE_TOOL';
const nextId = 0;
export function addTool(title, link, description, tags) {
return {
type: ADD_TOOL,
id: nextId,
title,
link,
description,
tags,
};
}
export function removeTool(id) {
return {
type: REMOVE_TOOL,
id,
};
}
export function updateTool(id, title, link, description, tags) {
return {
type: UPDATE_TOOL,
id,
title,
link,
description,
tags,
};
}
store/index.js存储/index.js
import { createStore } from 'redux';
const store = createStore(() => {});
export default store;
reducers/index.js减速器/index.js
import { combineReducers } from 'redux';
import tool from './tool';
const store = combineReducers({
tool,
});
export default store;
reducers/tool.js减速器/tool.js
import { ADD_TOOL, REMOVE_TOOL, UPDATE_TOOL } from '../actions';
const INITIAL_STATE = [];
export default function Tool(state = INITIAL_STATE, action) {
switch (action.type) {
case ADD_TOOL:
return [
...state,
{
id: action.id,
title: action.title,
link: action.link,
description: action.description,
tags: action.tags,
},
];
case REMOVE_TOOL:
return state.filter(({ id }) => id !== action.id);
case UPDATE_TOOL:
return state.map(tool => (tool.id === action.id ? { ...tool, ...action } : tool));
default:
return state;
}
}
enter code here
================================= friend Dev, here is all the data I developed to create a CRUD and with me it worked fine, I'm just having difficulty clicking a record, and this record appears in the form to edit, the main one is doing what it is, API data. ================================= 朋友 Dev,这是我为创建 CRUD 而开发的所有数据它工作得很好,我只是很难点击一条记录,这条记录出现在要编辑的表格中,主要的是在做什么,API 数据。
Good luck in your studies.祝你学习顺利。
NOTE: I'm assuming that you already know how to use the data described above, it's not in the order, but just coding or paste correctly will work.注意:我假设您已经知道如何使用上述数据,它不是按顺序排列的,但只需正确编码或粘贴即可。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.