Как добавить элементы DOM в мое состояние с помощью ловушки useEffect без ошибок / предупреждений в консоли?

Question

Я на самом деле пытаюсь нацелить некоторые элементы DOM в моем пустом состоянии с помощью useState и useEffect hooks .
Никаких проблем, я думаю, что я делаю правильно. Вот мой фактический код:

const [state, setState] = useState({
    title: [],
    subtitle: []
});

useEffect(() => {
    const myNewTitle = ["Hello", "World"];
    const myNewSubtitle = ["What's", "up?"];

    setState({...state, title: myNewTitle, subtitle: myNewSubtitle})
    console.log(state)
}, [state]);

Здесь моя консоль отображает бесконечный l oop.
Я пытался написать пустой массив [], но новые значения моего состояния не отображаются в консоли, как мне бы хотелось. Итак, я написал это: [state.title[0], state.subtitle[0]]);

Я не знаю, правильный ли мой код или нет. Консоль отображает то, что я хотел, новые значения моего состояния.
Но в консоли я получил это предупреждение:

У React Hook useEffect отсутствует зависимость: 'состояние'. Либо включите его, либо удалите массив зависимостей. Вы также можете выполнить функциональное обновление 'setState (s => ...)', если вам нужно только 'состояние' в вызове реакции-перехватов setState / исчерпывающее-deps

На самом деле, я не знаю, как решить эту проблему. Может кто-то мне помочь, пожалуйста ?

Точность : Конечно, это действительно простой пример. В моем проекте я хочу повторно использовать свое состояние (title + subtitle) в функциях, записанных за пределами ловушки useEffect .

Answer 1

Вы можете избежать необходимости помещать state в список зависимостей, используя версию обратного вызова setState(), которая имеет текущее состояние в качестве параметра.

Поскольку этот параметр является локальным (внутри) useEffect, нет необходимости объявлять его как зависимость.

useEffect(() => {

  const myNewTitle = ["Hello", "World"];
  const myNewSubtitle = ["What's", "up?"];

  setState(oldState => {
    return {...oldState, title: myNewTitle, subtitle: myNewSubtitle};
  });

}, []);

Answer 2

//can be anything, a string, undefined, a boolean
const [title, setTitle] = ("");
const [subtitle, setSubtitle] = ("");

//when the component is (re)rendered, this will be called.
useEffect(() => {

},[])
//"keeping track" of anything in the array, when they are updated, useEffect is executed

тогда в вашем компоненте вы можете позвонить setSubtitle("the value you want to update it with")