React useEffect中setInterval内状态无法更新的问题排查与解决

我正在开发一个组件挂载时自动生成文本的机器人，但在useEffect中使用setInterval遇到问题。预期效果是将示例文本中的每个单词拼接后更新至conversation状态，直至完成，但代码仅显示第一个单词Hello。

const sampleText = 'Hello my customer, how can I help you?';

const [conversation, setConversation] = useState([]);

useEffect(() => {
    let i = 0;

    const textToArray = sampleText.split(' '); 

    const newText = [...conversation];

    // create initialization state for the first time
    if (newText.length < 1) {
        newText.push({
            id: Math.random(),
            reply_as: 'bot',
            message: '',
        });
    }

    // begining to generate bot message to reply
    const timer = setInterval(() => {
        if (i < textToArray.length) {
            // concate a message property in latest item with each string in newText array
            newText[newText.length - 1].message += textToArray[i];
            setConversation(newText);
        } else {
            clearInterval(timer);
        }

        i++;
    }, 300);

    return () => clearInterval(timer);
}, []);

return (
   <div className="message-list">
      {conversation.map(item => (             
         <div>
            <span>Sender: {item.reply_as}</span>
            <p>{item.message}</p>
         </div>
      ))}
   </div>
)

问题原因 #

• 闭包捕获旧值：useEffect依赖数组为空，仅在组件挂载时执行一次。newText是挂载时从conversation初始状态复制的数组，后续setInterval回调始终修改这个初始的数组引用，每次调用setConversation(newText)时，因引用未变化，React浅比较后不会触发重新渲染。
• 状态更新违反不可变原则：直接修改newText内的对象属性，未创建新的数组/对象副本，React无法检测到状态变化。

解决方法 #

采用函数式更新获取最新状态，每次修改都创建新的数组和对象副本，保证React能检测到状态变化并渲染。

修正后的代码：

const sampleText = 'Hello my customer, how can I help you?';

const [conversation, setConversation] = useState([]);

useEffect(() => {
    let i = 0;
    const textToArray = sampleText.split(' '); 

    // 初始化第一个消息项
    setConversation(prev => {
        if (prev.length === 0) {
            return [{
                id: Math.random(),
                reply_as: 'bot',
                message: '',
            }];
        }
        return prev;
    });

    const timer = setInterval(() => {
        if (i < textToArray.length) {
            // 基于最新状态创建副本更新
            setConversation(prev => {
                const updatedConversation = [...prev];
                const lastMessage = { ...updatedConversation[updatedConversation.length - 1] };
                // 拼接时添加空格，还原原文本格式
                lastMessage.message += (i === 0 ? '' : ' ') + textToArray[i];
                updatedConversation[updatedConversation.length - 1] = lastMessage;
                return updatedConversation;
            });
            i++;
        } else {
            clearInterval(timer);
        }
    }, 300);

    return () => clearInterval(timer);
}, []);

return (
   <div className="message-list">
      {conversation.map(item => (             
         <div key={item.id}> {/* 添加key属性避免列表渲染警告 */}
            <span>Sender: {item.reply_as}</span>
            <p>{item.message}</p>
         </div>
      ))}
   </div>
)

关键优化点：

• 用setConversation(prev => ...)函数式更新，确保每次基于最新状态修改，规避闭包旧值问题。
• 每次更新都创建数组和消息对象的新副本，遵循React状态不可变原则。
• 拼接单词时添加空格，保证文本格式符合原句。
• 给列表项添加key属性，符合React列表渲染规范。

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