首页 > 解决方案 > 我该如何反应(从 Json 获取 axios 并重新排列我的页面)

问题描述

为什么我要问这个问题(主要回报)已经结束,但是

董事会作家

不是画。我怎样才能画出这个对象

如果我的问题是错误的方式请告诉我。我会修好它

我试过这种方式

  1. 首先使用地图功能
  2. 像这样的函数 renderUser = ({board_SEQ, content, writer,subject}) => {
  3. 范围
  4. }
    const Home = () => {
        const initboard = {
            board_SEQ: '',
            writer: '',
            content: '',
            subject: ''
        };
    
        const [boards, setBoard] = useState([]);
    
    
        const load = () => {
            axios.get('http://www.heon.shop:8080/api/boards')
                .then((res) => {
                    const data = res.data;
    
                    setBoard(boards => [...boards, {
                        board_SEQ: (data[0].board_SEQ),
                        writer: data[0].writer,
                        content: data[0].content,
                        subject: data[0].subject
                    }]);
    
    
                })
                .catch((error) => {
                        console.log("error" + error);
                    }
                );
    
        }
        useEffect(() => {
            load();
            console.log("useEffect");
        }, []);
    
        const renderUser = ({board_SEQ, content, writer, subject}) => {
            return (
                <div>
                    <li>he</li>
                    <li>{board_SEQ}</li>
                    <li>{content}</li>
                    <li>{writer}</li>
                    <li>{subject}</li>
                </div>
            );
        }
    
    
        return (
    
            <div>
                {boards.map(board => {
                    <h1> {board.writer}</h1>
                })}
            </div>
        );
    
    }
    export default Home;

标签: jsonreactjsaxiosrendering

解决方案


或许你可以这样试试

 <div>
    {boards.map(board => renderUser(board)}
 </div>

如果您想直接使用(添加返回到地图)呈现项目:

 <div>
    {boards.map(board => {
       return <h1> {board.writer}</h1>;
    })}
 </div>

推荐阅读