React бесконечный рендеринг: выбор между мутирующим массивом состояний или нет

Question

Как заголовок. Мне не следует изменять такое состояние на основе предложения в разделе « Невозможно видеть обновления из дочернего компонента через обратный вызов родительского компонента (массив случаев и push)»

Итак, в https://codepen.io/jadecubes/pen/dygjGZL я пытаюсь установитьWords(новый массив) , но это вызывает бесконечный рендеринг.

      // React.js libraries are added as external scripts in the JS settings of this pen

const { useState, useEffect } = React;

A = () => {
    const [info, setInfo] = useState("Hello world.");
    const [entered, setEntered] = useState('');
    return (
        <>
      <input type="text" 
        onChange={(e)=>{setInfo(e.target.value);}}
        onKeyUp={(e)=>{if(e.key=='Enter') setEntered(info); }}
        />
      <B enteredTxt={entered}/>
            <h1>{info}</h1>
        </>
    );
};

B = (props) => {
const [words,setWords] = useState([]);
  words.length=0;//I should not do this. I should re-assign a new array like setWords()
  words.push(props.enteredTxt);
  setWords(arrayGen());//But when I do this, the react infinite rendering happens!
  return(
      <div>
         {words} 
      </div>
  );
}

const arrayGen=()=>{
  return ['This ','is ','hello ', 'world!'];
}
const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<A />);

Кроме того, какой способ удаления всех элементов массива предлагается? Из Удалить все элементы массива в React JS . Может быть, прямое изменение — не лучшая идея? Любые советы приветствуются.

      newArray = this.state.data.slice();

Answer 1

Если вы хотите только позвонитьsetWordsтолько когдаenteredTxtизменения, вы должны использовать useEffect следующим образом:

      useEffect(() => {
  setWords(arrayGen());
}, [props.enteredTxt])

Чтобы удалить все элементы, вы можете просто назначить новый массив:

newArray = [];