Как правильно установить состояние в соответствии с данными выборки?

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

Оба способа устанавливают состояние неизменным способом. Мне нужно, если вам нужно обрабатывать данные, например, фильтровать, форматировать или удалять во внешнем интерфейсе, вам нужно будет использовать способ 1. Если данные не нужно обрабатывать , Я порекомендую способ 2. Кроме того, я порекомендую подготовить данные, как вам нужно, в базе данных или бэкэнде, а затем отправить их в веб-интерфейс.

Answer 2

В компонентах класса у нас есть объект состояния, который мы обновляем и получаем значения. В этом случае неизменное состояние может быть проблемой.

В функциональных компонентах вы можете получить более неизменное состояние, потому что мы ссылаемся на одну сущность / значение за раз. Итак, ваш второй пример кода будет хорошим способом для go.

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

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