React状态变更时从数组渲染嵌套组件的实现问题

嘿，我看了你的代码和需求，其实你已经找对方向了，只是有些细节需要调整，咱们一步步来：

核心思路：父组件存选中索引而非单个对象 #

你的疑问里提到的「在父组件中存储数组并根据索引变更状态」是更合理的方案——因为数组是从GraphQL传入的props，父组件只需要维护当前选中的索引，每次切换时更新索引，再从props的数组里取对应数据传给子组件，这样既灵活又能保证数据和props同步。

现有代码的几个问题 #

1. componentDidMount里的data变量没定义（应该是this.props.data吧？毕竟你说GraphQL把JSON作为props导入）
2. showPsContent方法没绑定this，直接调用会报错
3. 按钮的showContent(index)方法根本没定义，也没传递具体索引值
4. 直接把单个对象存在state里，当props的数组更新时，state不会自动同步

修改后的完整代码 #

class Work extends React.Component {
  constructor(props) {
    super(props);
    // 只存当前选中的索引，初始选第一个（索引0）
    this.state = { currentIndex: 0 };
    // 如果不用箭头函数，需要绑定this
    this.showContent = this.showContent.bind(this);
  }

  // 接收索引参数，更新状态
  showContent(index) {
    this.setState({ currentIndex: index });
  }

  render() {
    // 从props里拿到完整的workpages数组
    const { workpages } = this.props.data;
    // 根据当前索引获取要展示的单个对象
    const currentPageData = workpages[this.state.currentIndex];

    return (
      <div id='work'>
        <NavBar/>
        <div className='work-content'>
          <div className="side-nav">
            {/* 给每个按钮传递对应的索引，比如第一个按钮传0，第二个传1 */}
            <button onClick={() => this.showContent(0)}>Escobar</button>
            <button onClick={() => this.showContent(1)}>General Assembly</button>
            {/* 如果有第三个对象，继续加按钮传2 */}
          </div>
          <h1 className="work-header">{currentPageData.title}</h1>
          {/* 把当前选中的对象传给子组件 */}
          <Page data={currentPageData}/>
        </div>
      </div>
    )
  }
}

关键优化点说明 #

• 状态只存索引：避免重复存储数据，保证数据始终和GraphQL传入的props一致，当props更新时（比如重新获取数据），页面会自动同步最新内容
• 绑定方法或用箭头函数：确保showContent里的this指向组件实例
• 按钮传递明确索引：每个按钮对应数组里的一个对象，点击时直接切换到对应索引
• 子组件只需要接收单个对象：子组件可以直接使用props.data里的title、body等字段，不需要再处理数组遍历（如果子组件需要遍历数组的话，你也可以把整个数组和当前索引一起传过去，但通常子组件只需要当前展示的数据）

补充：如果想用箭头函数简化代码 #

你可以把showContent改成类字段箭头函数，这样就不用在constructor里绑定this了：

showContent = (index) => {
  this.setState({ currentIndex: index });
}

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