Обновление одного поля в React не работает - PullRequest
Новая
       68

Обновление одного поля в React не работает

0 голосов
/ 11 июля 2020

Надеюсь, вы все в порядке. Я пытаюсь создать функцию обновления в Mern, когда я попробовал ее на Postman, она работает нормально, но когда я пытаюсь реализовать то же самое с React, это не дает мне никакого результата, а также не дает мне никаких ошибок. Я не могу понять, что делаю не так. Если кто-то из присутствующих может понять, посмотрев на мой код, что в нем не так, это будет большим подспорьем. Заранее большое спасибо. 

import { getANews, updateNews } from "../../actions/news";

const Edit = ({ router }) => {
    const [websiteCategory, setWebsiteCategory] = useState("");

    useEffect(() => {
        initNews();
    }, [router]);

    // get a single news to make changes on it
    const initNews = () => {
        if (router.query._id) {
            getANews(router.query._id).then((data) => {
                if (data.error) {
                    console.log(data.error);
                } else {
                    setWebsiteCategory(data.websiteCategory);
                }
            });
        }
    };

    const onChangeWebsiteCategory = (event) => {
        setWebsiteCategory( event.target.value);
    };

    // update the category field in this particular news
    const editNews = (event) => {
        event.preventDefault();
        updateNews(router.query.id, websiteCategory).then((data) => {
            if (data.error) {
                console.log("error");
            } else {
                console.log(websiteCategory);
                console.log(data);
            }
        });
    };

    return (
        <div>
            <h3>Edit News</h3>
            <form onSubmit={editNews}>
                <div className="form-group">
                    <label>Website-Category </label>
                    <input
                    type="text"
                    className="form-control"
                    defaultValue={websiteCategory}
                    onChange={onChangeWebsiteCategory}
                    />
                </div>
                <div className="form-group">
                    <input type="submit" value="Edit News" className="btn btn-primary" />
                </div>
            </form>
        </div>
    );
};

export default withRouter(Edit);

Изменить: Спасибо за ответ, ниже представлен полный код. Надеюсь, это поможет мне:)

Это мой файл действий / новостей 

import fetch from "isomorphic-fetch";
import { API } from "../config";
// API = http://localhost:3000/


export const getANews = (id) => {
  return fetch(`${API}/news/${id}`, {
    method: "GET",
  })
    .then((response) => {
      return response.json();
    })
    .catch((err) => console.log(err));
};

export const updateNews = (id) => {
  return fetch(`${API}/news/${id}`, {
    method: "POST",
    headers: {
      Accept: "application/json",
    },
  })
    .then((response) => {
      return response.json();
    })
    .catch((err) => console.log(err));
};

Ответы [ 2 ]

0 голосов
/ 26 июля 2020

Наконец-то я нашел решение, раньше я не отправлял категорию в своей функции обновления. Поэтому я удалил свою функцию обновления из файла действия, извлек данные из своей функции и отправил обновленные данные обратно в тело. 

const editNews = () => {
    return fetch(`${API}/news/${id}`, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(websiteCategory),
    })
      .then((response) => {
        return response.json();
      })
      .catch((err) => console.log(err));
  };
0 голосов
/ 11 июля 2020

ваш код выглядит нормально. У меня нет вашей .... реализации акции / новости. Так что не могу запустить ваш код.

могу я предложить вашу строку 25-26 переключить на

setWebsiteCategory (event.target.value);

вы кодируете в моей IDE

Я посмотрел на ваш код, повторил вашу проблему. Второй параметр useEffect должен быть пустым массивом. поэтому инициализация вызывается один раз в начале. (прочтите раздел «Предотвращение бесконечных обратных вызовов с помощью зависимостей» в https://blog.bitsrc.io/fetching-data-in-react-using-hooks-c6fdd71cb24a

see https://codepen.io/lukelee10/pen/VweGByb

- вот что я пошутил. getANews и updateNews из строк 46-53 - это мой заглушенный звонок к API (обратите внимание, что они обе являются asyn c функцией (что означает, что они возвращают обещание).

Итак, вы убираете строки 54 - 97.

...