javascript - 根据获取数据设置 State 的正确方法是什么？

Question

我确实对此进行了搜索，但找不到解释哪种方式应该有效并遵循。

如果我们想添加新的数据到我们的状态，我们肯定会使用不可变的方式，比如映射整个数据来创建新的数组或过滤器来删除等等。但是，我无法弄清楚从服务器获取数据时哪种方式合适，为什么？我真的需要迭代整个数组或创建对象的深拷贝吗？

方式 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

在类组件中，我们有状态对象，我们正在更新它并从中获取值。在这种情况下，不可变状态可能会成为一个问题。

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

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

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