Реакция: как обновить список при отправке формы без обновления страницы?

Я отображаю данные в списке с порядком сортировки в текстовом поле. Пользователь может изменить порядок и нажать кнопку «Отправить», чтобы сохранить измененный порядок в базе данных. список будет отображаться в новом порядке при обновлении страницы. Проблема: как обновить список при отправке формы без обновления страницы. Пожалуйста помоги. Пожалуйста, найдите мою песочницу: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>
                 &nbsp;{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>
 );
}

Спасибо

Можно ли отправить данные обратно при успешном отправке API? таким образом вы можете установить данные для состояния из ответа назад

KcH 20.11.2022 07:06
Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
В этом руководстве вы узнаете, как использовать API парсинга квитанций за 5 минут с помощью JavaScript. Eden AI предоставляет простой и удобный для...
Хук useOnClickOutside в ReactJS
Хук useOnClickOutside в ReactJS
Как разработчик ReactJS, вы, возможно, сталкивались с ситуацией, когда вам нужно закрыть модальное или выпадающее меню, когда кто-то щелкает за его...
Хуки (часть-2) - useEffect
Хуки (часть-2) - useEffect
Хук useEffect - один из самых мощных и универсальных инструментов в арсенале разработчика React. Он позволяет вам управлять побочными эффектами в...
Простое руководство по тестированию взаимодействия с пользователем с помощью библиотеки тестирования React
Простое руководство по тестированию взаимодействия с пользователем с помощью библиотеки тестирования React
В предыдущем посте я показал вам на примерах, как писать базовые тесты в React. Важнейшей частью пользовательского интерфейса приложений является...
Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
Создайте титры как в звездных войнах с помощью CSS и Javascript
Создайте титры как в звездных войнах с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
0
1
52
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вызовите this.getlistofdescriptions(), когда запрос на публикацию завершится успешно (место, где вы устанавливаете статус проверки после запроса).

Пожалуйста, обновите мой код, что нужно сделать.

TestUser 20.11.2022 07:10
Ответ принят как подходящий

Вы можете сортировать состояние 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

Спасибо Али за решение. оно работает.

TestUser 20.11.2022 07:47

Привет Али, Есть ли способ сделать сортировку по алфавиту?

TestUser 20.11.2022 07:53

Привет, ты имеешь в виду, что хочешь отсортировать его по item.value?

Ali Sattarzadeh 20.11.2022 07:56

Отсортировать по последовательности (порядку). если порядок такой же, то отсортируйте его по item.value

TestUser 20.11.2022 08:03

Ага, вы можете добавить еще одно сравнение, дайте мне редактировать коды и ящик

Ali Sattarzadeh 20.11.2022 08:05
codeandbox.io/s/late-tdd-rnzr6e?file=/src/App.js проверьте это
Ali Sattarzadeh 20.11.2022 08:18

Спасибо Али. В настоящее время он не работает.

TestUser 20.11.2022 09:09

Привет Али, пожалуйста, проверьте код. данные не сортируются при отправке страницы.

TestUser 20.11.2022 13:23

Привет, вы имеете в виду, что он не сравнивает массивы с сортировкой или вообще не сортирует?

Ali Sattarzadeh 20.11.2022 13:25

Да он вообще не сортируется.

TestUser 20.11.2022 18:57

Привет, Али, код в песочнице больше не сортируется при отправке формы без обновления страницы.

TestUser 21.11.2022 03:30

Привет, не могли бы вы прислать мне образец ответа из бэкэнда?

Ali Sattarzadeh 21.11.2022 06:23

Пример серверной части выглядит следующим образом: {[ { "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": "Проверка добавления снова." }, ]}

TestUser 21.11.2022 07:03

Сортировка данных с последовательностью и значением элемента при отправке формы без обновления страницы. Данные изначально были хорошо отсортированы с последовательностью.

TestUser 21.11.2022 07:05

Привет, Али, твой исходный код отлично работает с последовательностью. список был отсортирован правильно. Новый код не работает, в котором он сначала сортируется по порядку, если последовательность такая же, то сортируется по заголовку.

TestUser 21.11.2022 17:20

Другие вопросы по теме