React报错：React.Children.only期望单个子元素，求解决方案

嘿，我帮你找到了问题的根源！这个React.Children.only expected to receive a single React element child错误，本质是某个组件要求必须接收单个React元素作为子节点，但你的代码里有地方没满足这个要求，咱们一步步来修复：

1. 修复 CSSTransition 的子元素与 key 写法 #

你的CSSTransition标签现在是空的，完全没有包裹任何子元素——而CSSTransition（属于TransitionGroup动画体系的组件）明确要求必须有且只有一个子元素，空内容直接触发了这个报错。另外你写的key="{id}"是错误的，引号会把{id}变成固定字符串，没法绑定动态的item id，得去掉引号。

把这部分代码改成这样：

{this.state.items.map(({ id, name}) => (
  <CSSTransition key={id} timeout={500} classNames="fade">
    {/* 这里必须添加单个子元素，比如用ListGroup.Item展示购物项 */}
    <ListGroup.Item>
      {name}
      {/* 你还可以加删除按钮之类的功能，先保证有合法子元素就行 */}
    </ListGroup.Item>
  </CSSTransition>
))}

2. 修正冗余的状态赋值（非紧急但建议修复） #

你代码里写了const items= this.state;，这明显是笔误——this.state是包含items数组的状态对象，正确的写法应该是const items = this.state.items;，这样后续如果需要直接用items变量遍历的话才是正确的数组。

3. 小细节：组件首字母大写 #

注意你的container标签，React要求自定义组件必须首字母大写，如果这是Bootstrap的容器组件，应该写成<Container>（首字母大写），否则React会把它当成不存在的HTML标签，虽然这不会直接导致当前错误，但也是潜在的bug。

修改后的完整ShoppingList关键部分代码参考：

class ShoppingList extends Component {
  state = {
    items: [
      { id: uuid(), name: 'Eggs'},
      { id: uuid(), name: 'Milk'},
      { id: uuid(), name: 'Apples'},
      { id: uuid(), name: 'Water'},
    ]
  }
  render() {
    const items = this.state.items; // 修复赋值错误
    return(
      <Container> {/* 首字母大写，使用正确的组件 */}
        <Button color="dark" style={{marginBottom : '2rem'}} onClick={() => {
          const name = prompt("Enter item");
          if (name) {
            this.setState( state => ({ items: [...state.items, {id: uuid(), name}] }));
          }
        }} >Add Item</Button>
        <ListGroup>
          <TransitionGroup className="shopping-list">
            {items.map(({ id, name}) => ( // 用修复后的items变量遍历
              <CSSTransition key={id} timeout={500} classNames="fade">
                <ListGroup.Item>
                  {name}
                </ListGroup.Item>
              </CSSTransition>
            ))}
          </TransitionGroup>
        </ListGroup>
      </Container>
    )
  }
}

这样修改后，CSSTransition有了合法的单个子元素，key也正确绑定了动态id，应该就能解决这个报错了。

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