代码之家 › 专栏 › 技术社区 › abu abu

React中的.map()问题

reactjs

abu abu · 技术社区 · 6 年前

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">
                    { 
                        items.map(({id, name}) => {
                            <CSSTransition key = { id } timeout = { 500 } classNames = "fade" >
                                <ListGroupItem>
                                    { name }
                                </ListGroupItem>
                            </CSSTransition>
                        })
                    }
                </TransitionGroup>
            </ListGroup>                        
        </Container>
    ); 
}

我得到如下错误

.map() . 我试了好几种方法,但都找不到解决办法。

更新

<ListGroup>
    <TransitionGroup className="shopping-list">
        { 

        }
    </TransitionGroup>
</ListGroup>

3 回复 | 直到 6 年前

Shubham Gupta 6 年前

地图上什么也没有找到。更新你的代码如下,它将工作。

<ListGroup>
   <TransitionGroup className="shopping-list">
      { 
        items.map(({id, name}) => {
         return (<CSSTransition key = { id } timeout = { 500 } classNames = "fade" >
              <ListGroupItem>
                 { name }
              </ListGroupItem>
         </CSSTransition>)
         })
      }
   </TransitionGroup>
</ListGroup>

Nisfan 6 年前

您忘记了块语句中的return关键字

<ListGroup>
   <TransitionGroup className="shopping-list">
     { 
       items.map(({id, name}) => {
          return <CSSTransition key = { id } timeout = { 500 } classNames = "fade" >
               <ListGroupItem>
                 { name }
               </ListGroupItem>
             </CSSTransition>
        })
     }
   </TransitionGroup>
</ListGroup>

Matt Carlotta 6 年前

尝试包装一个 div 或 span CSSTransition .

<ListGroup>
  <TransitionGroup className="shopping-list">
    { items.map(({id, name}) => (
        <div key={id}>
          <CSSTransition key = { id } timeout = { 500 } classNames = "fade" >
            <div>
              <ListGroupItem>
                { name }
              </ListGroupItem>
            </div>
          </CSSTransition>
        </div>
    ))}
  </TransitionGroup>
</ListGroup>

两者之间也有很大的区别 react-transition-group

https://codesandbox.io/s/2pyrr8l33n

import React, { Component } from "react";
import { CSSTransition } from "react-transition-group";

export default class Example extends Component {
  state = {
    isVisible: true,
    text: ["Wow", "this", "works!"]
  };

  handleClick = () =>
    this.setState(prevState => ({
      isVisible: !this.state.isVisible
    }));

  render = () => (
    <div style={{ padding: "20px" }}>
      <div style={{ marginBottom: 30 }}>
        <CSSTransition
          in={this.state.isVisible}
          timeout={300}
          classNames="messagein"
          unmountOnExit
        >
          <div style={{ marginTop: 20 }} className="messageout">
            {this.state.text.map(text => <p key={text}>{text}</p>)}
          </div>
        </CSSTransition>
      </div>
      <button
        className="uk-button uk-button-primary"
        onClick={this.handleClick}
      >
        {this.state.isVisible ? "Hide" : "Show"} Text
      </button>
    </div>
  );
}