박깽
16
2020-10-07 17:21:57
3
108

리액트 map 문의



import React, { Component } from "react";
import { DraggableDroppable } from "react-drag-and-drop";

class DragAndDrop extends Component {
  constructor(props) {
    super(props);
    this.onDrop = this.onDrop.bind(this);
    this.state = {
      customerList: fetch('/api/customers').then(res => res.json()).then(res => this.setState({customerList:res})).catch(err => console.log(err)),
      customerList2: []
    };
  }
  onDrop(data) {
    // => banana
    let temp = this.state.customerList2.concat(data.fruit);

    this.setState({ customerList2: temp });
    console.log(temp);
  }
  render() {
    return (
      <div>
        <ul style={border: "1px solid" }}>
          {this.state.customerList.map((itemindex=> {
            console.log(item);
            return (
              <li key={index}>
                <Draggable type="fruit" data={item}>
                  <li>{item}</li>
                </Draggable>
              </li>
            );
          })}
        </ul>
        <Droppable
          types={["fruit"]} // <= allowed drop types
          onDrop={this.onDrop.bind(this)}
        >
          <ul
            className="Smoothie"
            style={border: "1px solid"minHeight: "50px" }}
          >
            {this.state.customerList2.map((itemindex=> {
              console.log(item);
              return <li key={index}>{item}</li>;
            })}
          </ul>
        </Droppable>
      </div>
    );
  }
}

export default DragAndDrop;


this.state.customerList.map is not a function 라고 뜨는데 왜 출력이 안돼는걸까요 ㅠ

0
  • 답변 3

  • 페코옹
    575
    2020-10-07 17:30:18

    state 초기화 저렇게 하지 마시고..

    componentdidmount method 만들어서 하셔요~


  • 박깽
    16
    2020-10-07 18:14:59
    import React, { Component } from "react";
    import { DraggableDroppable } from "react-drag-and-drop";

    class DragAndDrop extends Component {
      constructor(props) {
        super(props);
        this.onDrop = this.onDrop.bind(this);
        this.state = {
          //customerList: fetch('/api/customers').then(res => res.json()).then(res => this.setState({customerList:res})).catch(err => console.log(err)),
          customerList2: []
        };
      }
      onDrop(data) {
        // => banana
        let temp = this.state.customerList2.concat(data.fruit);

        this.setState({ customerList2: temp });
        console.log(temp);
      }
      componentDidMount() {
        fetch('/api/customers').then(res=> res.json()).then(customerList => this.setState({customerList}));
    }
      render() {
        return (
          <div>
            <ul style={border: "1px solid" }}>
              {this.state.customerList.map((itemindex=> {
                console.log(item);
                return (
                  <li key={index}>
                    <Draggable type="fruit" data={item}>
                      <li>{item}</li>
                    </Draggable>
                  </li>
                );
              })}
            </ul>
            <Droppable
              types={["fruit"]} // <= allowed drop types
              onDrop={this.onDrop.bind(this)}
            >
              <ul
                className="Smoothie"
                style={border: "1px solid"minHeight: "50px" }}
              >
                {this.state.customerList2.map((itemindex=> {
                  console.log(item);
                  return <li key={index}>{item}</li>;
                })}
              </ul>
            </Droppable>
          </div>
        );
      }
    }

    export default DragAndDrop;

  • 박깽
    16
    2020-10-07 18:15:50

    자꾸 

     <ul style={border: "1px solid" }}>

    이쪽 오류나네요 ㅠㅠ



  • 로그인을 하시면 답변 을 등록할 수 있습니다.