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

Question

我无法将复制的数据设置为元素，我在这里做错了什么？我是 react 的新手。这是一个 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;

Answer 1

您不是将元素添加到数组，而是整个数据集。只需将数据元素散布到您的"new"元素中即可。

你想改变这个

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 不存在于您的数据中。