在反应中更新单个字段不起作用答案

【问题标题】：Updating a single field in react is not working在反应中更新单个字段不起作用
【发布时间】：2020-07-11 14:18:59
【问题描述】：

希望你们一切都好。我正在尝试在 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));
};

【问题讨论】：

请编辑您的问题以包含updateNews
你想更新什么？错误是什么？请指定必要的信息！
你能显示你的 updateNews() 操作的代码吗？

标签： javascript reactjs mongodb crud mern

【解决方案1】：

您的代码看起来不错。我没有你的 ....action/news 实施。所以无法运行你的代码。

我可以建议您切换到第 25-26 行

setWebsiteCategory(event.target.value);

you code in my IDE

我看了你的代码有重复你的问题。 useEffect 第二个参数应该是一个空数组。所以初始化在开始时被调用一次。（阅读https://blog.bitsrc.io/fetching-data-in-react-using-hooks-c6fdd71cb24a的“使用依赖项防止无休止的回调”部分

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

是我开玩笑的。第 46 - 53 行的 getANews 和 updateNews 是我对 API 的调用（注意它们都是异步函数（意味着它们返回承诺）。

所以，你的收获是第 54 - 97 行。

【讨论】：

谢谢卢克。我尝试了您的建议，但问题仍然存在，当我尝试从前端更新字段时，字段本身也被删除。但是，当我从邮递员那里尝试相同的操作时，该字段再次出现并根据需要进行更新。我已经编辑了我的 OP 以包含完整的代码。感谢您的帮助！
我对useEffect函数不太熟悉。我认为您正在尝试使用 initNews 函数初始化 *function 组件。为什么不直接调用呢？意思是起飞useEffect(() => { 和}, [route]) **顺便说一句，尝试传入{location} 而不是（{route}）。您的 withRoute 将导致位置被传递，而不是路由。 ***推到推，你可以在代码中输入debugger，你可以在上下文中看到错误是什么和在哪里——在浏览器页面上“检查”，你应该能够看到上下文来电。
感谢卢克的回复。我没有收到任何错误，实际上在更新时我收到了成功消息，但该字段更新为 null。我尝试删除 useEffect() 但问题仍然相同。
查看上面编辑的新答案。或见..codepen.io/lukelee10/pen/VweGByb
嗨，卢克，感谢您的努力，感谢您在此问题上花费的时间。我错过了提到它是一个 Next.js 项目。所以，当我尝试你的建议时，它给了我错误 - 位置未定义。当在我的代码中我从 useEffect 的第二个参数中删除路由器时，它给了我“未定义的新闻 id”，因为它不会在没有提到路由器作为第二个参数的情况下加载新闻。

【解决方案2】：

我终于找到了解决方案，之前我没有在我的更新功能中发送类别。所以我从动作文件中删除了我的更新函数，并在我的函数中获取数据并将更新的数据发送回正文。

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));
  };

【讨论】：