使用 mui TextField 输入更新 api 中的数据时出现问题答案

【问题标题】：Problem updating data in an api with mui TextField inputs使用 mui TextField 输入更新 api 中的数据时出现问题
【发布时间】：2021-10-03 03:55:23
【问题描述】：

我正在使用 jsonplaceholder api 制作帖子管理工具，但 put 方法有问题。如何更新文本输入修改？即使使用固定数据也无法正常工作。

const EditPost = ({ match }) => {  
    const [state, setState] = useState({
        title: "",
        body: "",
    });
    const [error] = useState("");
    const { id } = match.params;
    const [post, setPost] = useState(null);

    useEffect(() => {
        axios.get(`https://jsonplaceholder.typicode.com/posts/${id}`)
        .then((response) => {
            setPost(response.data);
            });
        }, []);

    const updatePost = () => {
        axios
        .put(`https://jsonplaceholder.typicode.com/posts/${id}`, {
            title: "Hello World!",
            body: "Post updated."
        })
        .then((response) => {
            setPost(response.data);
        });
    }

<form noValidate autoComplete="off" onSubmit={updatePost}>
                <TextField 
                    id="outlined-basic" 
                    label="Title" 
                    defaultValue={post.title || ""} 
                    name="title"
                    type="text" 
                    onChange="" />
                <TextField 
                    id="outlined-multiline-flexible" 
                    label="Body" 
                    defaultValue={post.body || ""} 
                    name="body"
                    type="text" 
                    onChange="" />
                <Button 
                    type="submit">
                        Update Post
                </Button>

【问题讨论】：

请edit您的问题标题更清楚地解释您提出的问题或您遇到的问题。如果你去掉 React.js 的冗余标签信息，你的整个标题就是 Updating data，这是一个没有意义的短语。您的标题应该足够清晰和具有描述性，以供将来浏览搜索结果列表以试图找到问题解决方案的网站用户使用，而您当前的标题在这个意义上是无用的。谢谢。
请花点时间阅读How to Ask。
在我看来TextField 可能有问题，但您没有说来自哪个库（是 mui TextField 吗？）或者它是否由您构建。如果它来自mui 库，我认为唯一可能存在问题的是您使用了defaultValue，它仅用于不受控制的文本字段（请参阅difference here）。相反，您应该将 onChange 属性设置为更新状态的函数，并使用状态提供 value 属性。如果字段要更新状态，这两个都是必需的。
是的，它来自 mui 库（现在已在标题中更新）。我使用“defaultValue”，因为使用“value”我无法修改文本字段，为什么会这样？我尝试了一些句柄事件功能，但我也没有改变。

标签： reactjs jsonplaceholder

【解决方案1】：

我建议你像这样重组你的组件：

const EditPost = ({ match }) => {
    const [error] = useState("");
    const { id } = match.params;
    const [postTitle, setPostTitle] = useState("");
    const [postBody, setPostBody] = useState("");

    useEffect(() => {
        axios
            .get(`https://jsonplaceholder.typicode.com/posts/${id}`)
            .then((response) => {
                setPost(response.data);
            });
    }, []);

    const updatePost = () => {
        axios
            .put(`https://jsonplaceholder.typicode.com/posts/${id}`, {
                title: postTitle,
                body: postBody,
            })
            .then(({ data }) => {
                setPostTitle(data.title);
                setPostBody(data.body);
            });
    };

    return (
        <form noValidate autoComplete="off" onSubmit={updatePost}>
            <TextField
                id="outlined-basic"
                label="Title"
                value={postTitle}
                name="title"
                type="text"
                onChange={(e) => setPostTitle(e.target.value)}
            />
            <TextField
                id="outlined-multiline-flexible"
                label="Body"
                value={postBody}
                name="body"
                type="text"
                onChange={(e) => setPostBody(e.target.value)}
            />
            <Button type="submit">Update Post</Button>
        </form>
    );
};

为了能够在用户键入时更新状态，您需要控制表单字段。这样做的方法是为每个字段提供一个value 属性，并使用onChange 属性来更新字段的状态。这是 mui 团队的recommended。

此外，我们已经将状态从单个对象（这让人想起类组件的时代）转移到单独的状态对象（postBody 和 postTitle），这应该会减少组件的部分次数必须重新渲染。

【讨论】：