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

IT技术 javascript reactjs
2021-04-27 22:30:34

我无法将数据复制设置为元素我在这里做错了什么？我是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;
2个回答

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

你想改变这个

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您的数据中不存在一件小事。

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

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

或者 concat

setElements(elements => elements.concat(data.elements))
其它你可能感兴趣的问题
上一篇外部react组件/module的路由 下一篇带有情感的 MUI v5 主题/mui