React父子组件共享状态：父组件内setSoda无法更新状态求助

核心问题：JSX语法错误 #

你的VendingMachine组件return语句里的最后一个div闭合标签写错了，这会导致组件渲染异常，直接让sellSoda里的setSoda无法正常触发状态更新：

// 错误写法
</div
// 正确写法
</div>

修正后的完整代码 #

VendingMachine组件 #

import React, { useState } from 'react'; // 补充遗漏的useState导入
import Sodas from './Sodas';

const VendingMachine = () => {
  // Track selected soda
  const [selectedSoda, setSoda] = useState({ sodaName: '', stock: 0 });

  const handleSodaSelection = (soda) => setSoda(soda);

  // Reset the selected soda
  const sellSoda = () => setSoda({ sodaName: '', stock: 0 });

  return (
    <div>
      Soda to Purchase: {selectedSoda.sodaName}
      <Sodas handleSodaSelection={handleSodaSelection} />
      <div onClick={sellSoda}>Buy Selected Soda</div>
    </div> {/* 修正闭合标签 */}
  );
};

export default VendingMachine;

Sodas组件（优化版） #

你的Sodas组件没必要自己维护sodaSelected状态，直接调用父组件传递的更新函数即可，减少不必要的状态和副作用：

function Sodas({ handleSodaSelection }) {
  return (
    <div className='soda_container'>
      <div onClick={() => handleSodaSelection({ sodaName: 'Cola', stock: 7 })}>Cola</div>
      {/* 可扩展更多选项 */}
      <div onClick={() => handleSodaSelection({ sodaName: 'Sprite', stock: 5 })}>Sprite</div>
    </div>
  );
}

export default Sodas;

补充说明 #

• React状态更新不存在单向限制：父组件既可以把更新函数传给子组件让子组件触发更新，也能自己直接调用更新函数修改状态，只要代码语法正确就能正常工作。
• 之前的代码还遗漏了useState的导入，这也是潜在的运行错误，修正后才能保证组件正常初始化。

内容的提问来源于stack exchange，提问作者kj.arch