Question

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

您不是将元素添加到数组，而是整个数据集。只需将数据元素散布到您的“新”元素中，您就可以使用了。

您要更改此

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这个小东西。

Answer 2

这里的问题是data.elements（是array）没有正确合并。请使用spread

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

或concat

setElements(elements => elements.concat(data.elements))

无法访问使用useState钩子复制的数据

2 个答案: