React Axios - 未列出获取的数据

Posted 2023-02-22

【中文标题】React Axios - 未列出获取的数据

【英文标题】：React Axios - The fetched data is not listed

【发布时间】：2020-06-10 16:45:30

【问题描述】：

我正在使用 Axios 发送数据和获取数据。数据来了，我可以用 console.log(res.data) 看到它，但我不能将 res.data 应用到 setMessages

  const [formData, setFormData] = useState( input: null );

  const [messages, setMessages] = useState([]);

  const  input  = formData;

  const onChange = e => setFormData( input: e.target.value );

  const onSubmit = event => 
    event.preventDefault();
    const data = new FormData(event.target);
    setMessages(prevMsgs => [...prevMsgs, formData]);

    console.log( input );

    axios
      .post(`http://localhost:4000/prediction`, (data: data), 
        crossdomain: true
      )
      .then(res => 
        console.log(res.data);
        setMessages(prevMsgs => [...prevMsgs, res.data]);
      )
      .catch(error => 
        console.log(error.message);
      );
  ;

【问题讨论】：

res.data的数据类型是什么？可以添加console.log(res.data)的输出吗？

嗨@Gustav，对我来说，输入是普通文本数据。在网络中，它说Content-Type: text/javascript，但在邮递员中，它说Content-Type: application/json console.log(res.data)的输出：“测试”

这有效：codesandbox.io/s/agitated-waterfall-o4tw7?expanddevtools=1 并且与您的示例非常相似，除了它是一个获取而不是一个帖子这一事实之外

@AndyMardell 我更新了我的代码，但 useEffect 无法使用 onSubmit。它说：React Hook "useEffect" 在函数 "onSubmit" 中被调用，它既不是 React 函数组件也不是自定义 React Hook 函数 react-hooks/rules-of-hooks

【参考方案1】：

在您的代码中，您直接执行异步操作。 要在功能组件中执行异步操作 'useEffect'，应根据挂载/更新要求使用钩子。

就像在类组件中从 componentDidMount 生命周期事件方法执行异步操作一样，useEffect 挂钩是 功能组件中的componentDidMount、componentDidUpdate和componentWillUnmount。

componentDidMount equivalent on a React function/Hooks component?

【讨论】：

但是 useEffect 不能与 onSubmit 一起使用。它说：React Hook "useEffect" 在函数 "onSubmit" 中被调用，它既不是 React 函数组件也不是自定义 React Hook 函数 react-hooks/rules-of-hooks