ReactJS如何使用useState存储字符串并在HTML中展示及解决重渲染报错

你在组件函数的顶层直接调用了状态更新函数saveName。React组件的规则是：只要组件内部的状态发生更新，就会触发组件重新渲染。你的代码每次渲染都会执行updateName('David')触发状态更新，状态更新又导致组件再次渲染，形成无限循环的渲染链，因此React抛出了重渲染次数超限的错误。

你可以根据实际的使用场景选择以下任意一种方案：

• 方案1：仅需设置状态初始值时，直接修改useState的入参即可，不需要额外调用更新函数

// 修改后的App.js
import React, { useState } from 'react';

const App = () => {
  // 直接把默认值设置为需要的字符串
  const [name, saveName] = useState('David');
  return (
      <h1>{ name }</h1>
  );
};
export default App;

• 方案2：需要在组件首次挂载完成后更新状态时，把更新逻辑放在useEffect中执行

// 修改后的App.js
import React, { useState, useEffect } from 'react';

const App = () => {
  const [name, saveName] = useState(false);
  const updateName = val => saveName(val);

  // 空依赖数组标识回调仅在组件首次挂载完成后执行1次，不会触发无限渲染
  useEffect(() => {
    updateName('David');
  }, []);

  return (
      <h1>{ name }</h1>
  );
};
export default App;

• 方案3：需要用户交互触发状态更新时，把更新函数绑定到事件回调上

// 修改后的App.js
import React, { useState } from 'react';

const App = () => {
  const [name, saveName] = useState(false);
  const updateName = val => saveName(val);

  return (
    <div>
      <h1>{ name }</h1>
      {/* 仅点击按钮时才会触发状态更新，不会在渲染时自动执行 */}
      <button onClick={() => updateName('David')}>设置名字</button>
    </div>
  );
};
export default App;

内容的提问来源于stack exchange，提问作者Gilliard Santos