javascript - 我收到错误 : React. Children.only 希望在我的 index.js 页面中收到单个 React 元素子元素。有解决方法吗

Question

此处为 Index.js 代码

    ReactDOM.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>,
    document.getElementById('root')
    );

我猜测错误不是来自上面的代码，也不是来自 App.js 代码。 App.js 代码在这里

        function App() {
          return (
            <div className="App">
              <header className="App-header">
                <AppNavbar/>
                <ShoppingList/>
              </header>
            </div>
          );
       }

以下是 ShoppingList.js 的摘录。希望这有帮助: 我认为这就是问题的根源，因为我更改了 items.map this.state.items.map 并且错误是，items.map 未定义.

    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;
        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">
                    {this.state.items.map(({ id, name}) => (
                        <CSSTransition key="{id}" timeout="500" classNames="fade">

                        </CSSTransition>
                    ))}
                    </TransitionGroup>
                </ListGroup>

               </container>
        )
      }

    }

我检查了许多与此类似的其他错误，但没有成功。有人有解决办法吗？

Answer 1

• 首先，根据react-transition-group documentation ，你需要把你需要转换的东西放在 <CSSTransition> 里面。所以在你的情况下，输入你的 ListGroup.Item和Button里面CSSTransition .
• 另外，你用错了key (字符串)在 <CSSTransition key="{id}" 。所以使用提供唯一的 key - 像这样 - <CSSTransition key={id}

代码的工作副本在这里:

https://codesandbox.io/s/wild-snow-gwilb?file=/src/ShoppingList.js