antd输入框组件在React中通过axios获取的列表中，无法正确设置状态（hook）。 _编程开发

antd输入框组件在React中通过axios获取的列表中，无法正确设置状态（hook）。

创始人

2024-11-07 18:30:15

0次

通过 useEffect 钩子来异步获取数据，并设置 state。

例如：

import { useState, useEffect } from 'react';
import { Input } from 'antd';
import axios from 'axios';

const ExampleComponent = () => {
  const [list, setList] = useState([]);
  const [inputValue, setInputValue] = useState('');

  useEffect(() => {
    const getList = async () => {
      const result = await axios.get('/api/list');
      setList(result.data);
    }
    getList();
  }, []);

  const handleInputChange = (event: React.ChangeEvent) => {
    setInputValue(event.target.value);
  }

  return (
    
      
      
        {list.map(item => {item.name})}
      
    
  )
}

在 useEffect 钩子中使用 async/await 来获取数据，并将获取到的数据存储到 state 中。

例如：

import { useState, useEffect } from 'react';
import { Input } from 'antd';
import axios from 'axios';

const ExampleComponent = () => {
  const [list, setList] = useState([]);
  const [inputValue, setInputValue] = useState('');

  useEffect(() => {
    const fetchData = async () => {
      try {
        const result = await axios.get('/api/list');
        setList(result.data);
      } catch (error) {
        console.log(error);
      }
    }
    fetchData();
  }, []);

  const handleInputChange = (event: React.ChangeEvent) => {
    setInputValue(event.target.value);
  }

  return (
    
      
      
        {list.map(item => {item.name})}
      
    
  )
}

上一篇：Antd输入框在滚动时值改变问题

下一篇：Antd树形多选组件在标签和标题之间的区别

antd输入框组件在React中通过axios获取的列表中，无法正确设置状态（hook）。

相关内容

热门资讯