根据获取数据设置状态的正确方法是什么？

Question

我确实进行了搜索，但是找不到解释哪种方法正确并遵循的解释。

如果要添加状态的新数据，请确保使用 immutable 方式，例如映射整个数据以创建新数组或要删除的过滤器，依此类推。但是，我无法弄清楚从服务器获取数据时哪种方式合适，为什么？我真的需要遍历整个数组或创建对象的深层副本吗？

方法1

const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((response) => {
        return response.json();
      })
      .then(myJson => {
        const newData = [];
        myJson.forEach(item => newData.push(item));
        setData(newData);
      });
  }, []);

方法2

const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((response) => {
        return response.json();
      })
      .then(myJson => {      
        setData(myJson);
      });
  }, []);

Answer 1

在类组件中，我们具有要更新并从中获取值的状态对象。在那种情况下，不可变状态可能是一个问题。

在功能组件中，您可以克服 immutable 状态，因为我们一次只引用一个实体/值。因此，您的第二个代码示例将是一个不错的选择。

const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((response) => {
        return response.json();
      })
      .then(myJson => {      
        setData(myJson);
      });
  }, []);

Answer 2

两种方式都使用不可变的方式设置状态，对我来说，如果您需要在前端处理数据（例如过滤，格式化或删除），则需要使用方式1。如果不需要处理数据，我将推荐方法2。此外，我将建议根据需要在数据库或后端中准备数据，然后将其发送到前端。