我收到一个错误：React.Children.only 预计会在我的 index.js 页面中收到一个 React 元素子项。 是否有解决方法

Question

Index.js code here

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

I am guessing the error is not comming from the code above and neither is it comming the App.js code. App.js code here

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

Here's an excerpt from ShoppingList.js. Hope this is of help: I think this is where the problem originates because I changed items.map this.state.items.map and the error was, items.map is not defined .

    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>
        )
      }

    }

I have checked many other errors similar to this but without any success. Does anyone have a solution for this?

Answer 1

• Firstly, as per react-transition-group documentation , you will need to put the stuff you need transition inside <CSSTransition> . So in your case, put your ListGroup.Item and Button inside CSSTransition .
• Also, you have used wrong key (string) in <CSSTransition key="{id}" . So use provide unique key - like this - <CSSTransition key={id}

Working copy of your code is here:

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

Answer 2

Try putting

<AppNavbar/>
<ShoppingList/>

under <div></div> tag as header might need single element under it.