React Hooks(useEffect) 表单子任务

Posted 2023-02-27

【中文标题】React Hooks(useEffect) 表单子任务

【英文标题】：React Hooks(useEffect) form Sub mission

【发布时间】：2021-01-03 01:39:16

【问题描述】：

我正在尝试创建一个反应表单以将帖子提交到模拟 API 中的一组帖子。这里我使用 effect 和 fetch API， 在帖子组件中，我列出了所有帖子并且它显示正确， 我在提交表单时遇到了一些问题，如果有人知道，请检查。

我的代码在下面

应用 js

import React from 'react';
import Addpost from './Addpost';
import './App.css';
import Post from './Post';

function App() 
  return (
    <div className="App">
        <Addpost />
        <Post />
    </div>
  );


export default App;

发布 js

import React,  useState, useEffect  from "react";
//https://5f61813d07c1770016c52193.mockapi.io/posts/
function Post() 
  const [post, setPost] = useState([]);


  useEffect(() => 
    async function fetchData() 
      const req = await fetch(
        "https://5f61813d07c1770016c52193.mockapi.io/posts/"
      ).then((r) => r.json());

      setPost(req);
      //console.log(req);
    
    fetchData();
  , []);



  return (
    <div>
      
      post?.map((p, index) => (
        <div key=index>
          <h3>p.title</h3> p.body <br /> <br /> <br />
        </div>
      ))
    </div>
  );


export default Post;

添加发布 js

  import React,  useState, useEffect  from "react";

function Addpost() 
  const [post, setPost] = useState([]);
  const [title, SetTilte] = useState("");
  const [body, SetBody] = useState("");
  const [id, SetId] = useState();
  const [userId, setuserId] = useState();

  let new_post = 
    title: title,
    body: body,
    id: id,
    userId: userId,
  ;
  async function postData() 
    const requestOptions = 
      method: "POST",
      headers:  "Content-Type": "application/json" ,
      body: JSON.stringify( title: "submited" ),
    ;
    const req = await fetch(
      "https://5f61813d07c1770016c52193.mockapi.io/posts/",
      requestOptions
    ).then((r) => r.json());

    setPost(...post, req);
  
  useEffect(() => 
    postData();
  , []);

  function handleSub(e) 
    e.preventDefault();

    postData(new_post);
  
  return (
    <div className="form">
      <form onSubmit=handleSub>
        <input
          type="number"
          value=id
          onChange=(e) => SetId(e.target.value)
        />
        <input
          type="number"
          value=userId
          onChange=(e) => setuserId(e.target.value)
        />
        <input value=title onChange=(e) => SetTilte(e.target.value) />
        <input value=body onChange=(e) => SetBody(e.target.value) />

        <button>submit</button>
      </form>
    </div>
  );


export default Addpost;

chrome 控制台中显示的错误消息

5f61813d07c1770016c52193.mockapi.io/posts/:1 Failed to load resource: the server responded with a status of 400 (Bad Request)
index.js:1 Warning: A component is changing an uncontrolled input of type number to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. 
    in input (at Addpost.js:41)
    in form (at Addpost.js:40)
    in div (at Addpost.js:39)
    in Addpost (at App.js:9)
    in div (at App.js:8)
    in App (at src/index.js:9)
    in StrictMode (at src/index.js:8)
console.<computed> @ index.js:1
5f61813d07c1770016c52193.mockapi.io/posts/:1 Failed to load resource: the server responded with a status of 400 (Bad Request)

【参考方案1】：

关于 API 的帖子，我认为这更多的是 API 问题而不是前端问题。返回数据是说你已经超过了最大元素

---

关于控制台错误

警告：组件正在更改类型为 number 的不受控制的输入 被控制。输入元素不应从不受控制的状态切换 控制（反之亦然）

只需初始化您的状态，以使input 组件的value 最初已经受到控制，而不是未定义。例如，空字符串

const [post, setPost] = useState([]);
const [title, SetTilte] = useState("");
const [body, SetBody] = useState("");
const [id, SetId] = useState("");
const [userId, setuserId] = useState("");

【参考方案2】：

对于 finxig 这个错误，请将您的输入类型设置为如下代码所示的文本

<input type="text" value=title onChange=(e) => SetTilte(e.target.value) />
<input type="text" value=body onChange=(e) => SetBody(e.target.value) />

我认为你的代码有更多问题，修复上述问题后，如果你有更多问题，请发表评论

【讨论】：

嘿Shahbaz，根据您的建议进行了更新，仍然存在相同的问题，出现以下错误 index.js:1 警告：组件正在更改要控制的类型编号的不受控制的输入。输入元素不应从不受控切换到受控（反之亦然）。在组件的生命周期内决定使用受控输入元素还是不受控输入元素。更多信息：