时间戳

首页 > 解决方案 > 无法访问使用 useState 挂钩复制的数据

javascript - 无法访问使用 useState 挂钩复制的数据

问题描述

我无法将数据复制到 elemnents 我在这里做错了什么？我是反应新手。这是一个json

import React, { useEffect, useState } from 'react';
import './App.css';
import axios from 'axios';

function App() {
  const [elements, setElements] = useState([]);

  useEffect(() => {
    const res = async () => {
      const result = await axios.get('/data');
      const data = result.data;
      setElements(elements => [...elements, data]);
    };
    res();
  }, []);
  console.log(elements.map(element => console.log(element)));
  return (
    <div className='App'>
      Hello
      {elements.map(element => (
        <div key={element._id}>{element.name}</div>
      ))}
    </div>
  );
}

export default App;

标签： javascriptreactjs

解决方案

您不是将元素添加到数组而是整个数据集。只需将数据元素传播到您的“新”元素中，您就可以开始了。

你想改变这个

setElements(elements => [...elements, data]);

对此

setElements(elements => [...elements, ...data.elements]);

所以最终结果是

import React, { useEffect, useState } from 'react';
import './App.css';
import axios from 'axios';

function App() {
  const [elements, setElements] = useState([]);

  useEffect(() => {
    const res = async () => {
      const result = await axios.get('/data');
      const data = result.data;
      setElements(elements => [...elements, ...data.elements]);
    };
    res();
  }, []);

  return (
    <div className='App'>
      Hello
      {elements.map(element => (
        <div key={element._id}>{element.name}</div>
      ))}
    </div>
  );
}

export default App;

element._id而且您的数据中不存在一件小事。

推荐阅读