作为标题。我不应该根据Cannot see updates from child component through parent's callback（case array and push）中的建议这样改变状态
因此，在https://codepen.io/jadecubes/pen/dygjGZL中，我尝试setWords（一个新数组），但它会触发无限渲染。

// 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 />);

另外，删除数组中所有元素的建议方法是什么？从Remove all the elements of the array in React JS，也许直接突变不是一个好主意？任何建议都欢迎。

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