Я отображаю данные в списке с порядком сортировки в текстовом поле. Пользователь может изменить порядок и нажать кнопку «Отправить», чтобы сохранить измененный порядок в базе данных. список будет отображаться в новом порядке при обновлении страницы. Проблема: как обновить список при отправке формы без обновления страницы. Пожалуйста помоги. Пожалуйста, найдите мою песочницу:https://codesandbox.io/s/gallant-morning-k4emln
import React from "react";
import XMLParser from "react-xml-parser";
const data = `<?xml version = "1.0"?>
<Category>
<description description-id = "11" display-sequence = "2">testing</description>
<description description-id = "15" display-sequence = "5">Guide</description>
<description description-id = "20" display-sequence = "7">test</description>
<description description-id = "25" display-sequence = "10">Guide</description>
<description description-id = "30" display-sequence = "12">test</description>
</Category>
</xml>`;
const REQUEST_URL = "";
const axios = {
get: () =>
new Promise((resolve) => {
setTimeout(resolve, 1000, { data });
})
};
class Order_Descriptions extends React.Component {
constructor(props) {
super(props);
this.state = {
proddescriptions: [],
proddescription_id: "",
display_sequence: ""
};
}
handleChangeEvent = (event) => {
const { name, value } = event.target;
this.setState((prevState) => ({
proddescriptions: prevState.proddescriptions.map((el) =>
el.id === name
? {
...el,
sequence: value
}
: el
)
}));
};
componentDidMount() {
this.getlistofdescriptions();
}
getlistofdescriptions() {
axios
.get(REQUEST_URL, { "Content-Type": "application/xml; charset=utf-8" })
.then((response) => {
const jsonDataFromXml = new XMLParser().parseFromString(data);
const descriptions = jsonDataFromXml.getElementsByTagName(
"description"
);
/* console.info(descriptions);
this.setState({
proddescriptions: jsonDataFromXml.getElementsByTagName("description")
});
});
const URL = "/descriptionlist"
axios
.get(URL, { 'withCredentials': 'true' })
.then((response) => {
const jsonDataFromXml = new XMLParser().parseFromString(response.data);
const descriptions = jsonDataFromXml.getElementsByTagName(
"description" )*/
const proddescriptions = descriptions.map(({ attributes, value }) => ({
id: attributes["description-id"],
sequence: attributes["display-sequence"],
value
}));
this.setState({
proddescriptions
});
});
}
handleSubmit = (event) => {
event.preventDefault();
const ProdDescriptions = this.state.proddescriptions;
const URL = "/descriptionlist/order";
const data = {
ProdDescriptions
};
fetch(URL, {
method: "POST",
headers: { "Content-Type": "application/json" },
credentials: "include",
body: JSON.stringify(data)
})
.then((response) => response.json())
.then((data) => {
this.setState({
ValidationStatus: data
});
})
.catch((error) => console.error("Error:", error));
};
render() {
return (
<div>
<form onSubmit = {this.handleSubmit}>
<div>
<ul style = {{ listStyle: "none" }}>
{this.state.proddescriptions.map((item) => (
<li key = {item.id}>
<label>
<input
type = "text"
name = {item.id}
size = "5"
maxLength = "3"
value = {item.sequence}
onChange = {this.handleChangeEvent}
/>
</label>
{item.value}{" "}
</li>
))}
</ul>
</div>
<input type = "submit" name = "submit" value = "Submit" id = "btnsubmit" />
</form>
</div>
);
}
}
export default function App() {
return (
<div className = "App">
<h1>Sort Data</h1>
<h5>Submit button sort list without page refresh</h5>
<Order_Descriptions />
</div>
);
}
спасибо
Вызовите this.getlistofdescriptions()
, когда запрос на публикацию завершится успешно (место, где вы устанавливаете статус проверки после запроса).
Пожалуйста, обновите мой код, что нужно сделать.
Вы можете сортировать состояние proddescriptions при успешном извлечении
вот что я сделал
Во-первых, я добавляю функцию сравнения, чтобы использовать ее в функции сортировки.
compare(a, b) {
if (parseInt(a.sequence, 10) > parseInt(b.sequence, 10)) return 1;
if (parseInt(a.sequence, 10) < parseInt(b.sequence, 10)) return -1;
return 0;
}
а затем отсортируйте состояние proddescriptions при успешном извлечении:
this.setState({ proddescriptions: ProdDescriptions.sort(compare) });
здесь вы можете увидеть результат:
https://codesandbox.io/s/late-tdd-rnzr6e?file=/src/App.js
спасибо Али за решение. оно работает.
Привет Али, Есть ли способ сделать сортировку по алфавиту?
Привет, ты имеешь в виду, что хочешь отсортировать его по item.value?
отсортировать по последовательности (порядку). если порядок такой же, то отсортируйте его по item.value
ага, вы можете добавить еще одно сравнение, дайте мне редактировать коды и ящик
Спасибо Али. В настоящее время он не работает.
Привет Али, пожалуйста, проверьте код. данные не сортируются при отправке страницы.
Привет, вы имеете в виду, что он не сравнивает массивы с сортировкой или вообще не сортирует?
Да он вообще не сортируется.
Привет, Али, код в песочнице больше не сортируется при отправке формы без обновления страницы.
Привет, не могли бы вы прислать мне образец ответа из бэкэнда?
Пример серверной части выглядит следующим образом: {[ { "id": "2126", "sequence": "1", "value": "First Test" }, { "id": "2123", "sequence": "3", "value": "Тестовое редактирование Happy Halloween" }, { "id": "2125", "sequence": "3", "value": "тестовое новое тестовое тестирование тестирование редактирование" }, { "id": "2112 ","sequence": "3","value": "Это testtesttt" }, { "id": "2124","sequence": "9","value": "Проверка добавления снова." }, ]}
Сортировка данных с последовательностью и значением элемента при отправке формы без обновления страницы. Данные изначально были хорошо отсортированы с последовательностью.
Привет, Али, твой исходный код отлично работает с последовательностью. список был отсортирован правильно. Новый код не работает, в котором он сначала сортируется по порядку, если последовательность такая же, то сортируется по заголовку.
Можно ли отправить данные обратно при успешном отправке API? таким образом вы можете установить данные для состояния из ответа назад