react js의 클래스 외부에서 parameter (_id)로 삭제 함수를 호출하는 방법은 무엇입니까?

바야 쿠 마라 나야 케

이것이 내가 시도한 것입니까? 코드에서 deleteDebt () 함수호출하고 싶었습니다 . 하지만 const Debt에 함수를 전달할 수 없습니다. (수업 밖) 어떻게하면 되나요?

여기서는 함수를 통해 props.debt._id를 전달하고 싶습니다. 테이블의 특정 행을 _id로 삭제하고 싶기 때문입니다.

const Debt = props => (



    <tr>
        <td>{props.debt.fullName}</td>
        <td>{props.debt.damount}</td>
        <td>
            <button className="btn btn-danger btn-info  " type="delete" onClick={() => this.deleteDebtor(props.debt._id)}>DELETE</button>

        </td>
    </tr>
)



export default class profile extends Component {
    constructor(props) {
        super(props);
        this.deleteDebtor = this.deleteDebtor.bind(this);



        this.state = {
            fullName: '',
            damount: '',
            users: []
        }
    }

이것은 내가 데이터베이스에서 데이터를 얻는 곳입니다.


    componentDidMount() {
        axios.get('url')
            .then(response => {
                this.setState({ users: response.data.data });
            })
            .catch(function (error) {
                console.log(error);
            })
    }

이것은 내가 테이블을 만드는 곳입니다.

    UserList() {

            // console.log(this.state.users);
            return this.state.users.map(function (currentDebt, i) {

                return <Debt debt={currentDebt} key={i} />;
            }


    }

이것은 deleteDebt () 함수입니다.


    deleteDebtor(data) {
        axios.delete('url' + data)


    }

이것은 렌더링 부분입니다


 render() {


        return (


            <React.Fragment>

                <div >
                                       <table } >
                                            <thead>
                                                <tr>
                                                    <th>Name </th>
                                                    <th>Amount</th>

                                                </tr>
                                            </thead>
                                            <tbody>

                                                {this.UserList()}
                                            </tbody>
                                        </table>
                </div>
            </React.Fragment>
        )
    }
}

라 메쉬 레디

this.deleteDebtoras props에 대한 참조를 전달할 수 있습니다 .

<Debt delete={this.deleteDebtor} debt={currentDebt} key={i} />;

const Debt = props => (
  <tr>
    <td>{props.debt.fullName}</td>
    <td>{props.debt.damount}</td>
    <td>
      <button className="btn btn-danger btn-info  " type="delete" onClick={() => props.delete(props.debt._id)}>DELETE</button>
    </td>
  </tr>
)

새 함수가 렌더링 될 때마다 생성되기 때문에 부모가 다시 렌더링 될 때마다 구성 요소가 다시 렌더링됩니다. React.memo이를 방지하기 위해 사용할 수 있습니다 .

const Debt = React.memo(props => (
  <tr>
    <td>{props.debt.fullName}</td>
    <td>{props.debt.damount}</td>
    <td>
      <button className="btn btn-danger btn-info  " type="delete" onClick={() => props.delete(props.debt._id)}>DELETE</button>
    </td>
  </tr>
));

최신 정보

범위 지정 문제가 있다고 생각합니다. 내부의 일반 기능을 map화살표 기능으로 변경하십시오 .

UserList() {
  // console.log(this.state.users);
  return this.state.users.map((currentDebt, i) => {
    return <Debt delete={this.deleteDebtor} debt={currentDebt} key={i} />;
  });
}

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

외부 클래스에서 내부 클래스의 함수를 호출하는 방법은 무엇입니까?

분류에서Dev

React의 자식 구성 요소에서 onchange 이벤트로 부모 클래스 구성 요소의 함수를 호출하는 방법은 무엇입니까?

분류에서Dev

클래스 함수를 클래스 외부로 이동하고 React에서 this 키워드를 사용하는 방법은 무엇입니까?

분류에서Dev

한 클래스에서 다른 클래스의 함수를 호출하는 방법은 무엇입니까?

분류에서Dev

React를 사용하여 외부에서 정의 된 자바 스크립트 함수를 호출하는 방법은 무엇입니까?

분류에서Dev

React에서 클래스 안에있는 함수를 호출하는 방법은 무엇입니까?

분류에서Dev

React Native로 제출 한 후 useEffect에서 비동기 함수를 호출하는 방법은 무엇입니까?

분류에서Dev

React Native에서 컴포넌트 클래스의 함수와 데이터를 Stateless 클래스로 전달하는 방법은 무엇입니까?

분류에서Dev

수퍼 클래스의 프로토콜 함수를 호출하는 방법은 무엇입니까?

분류에서Dev

클래스 정의 내에서 포인터 멤버 함수를 호출하는 방법은 무엇입니까?

분류에서Dev

다른 화면 클래스에서 Python으로 함수를 호출하는 방법은 무엇입니까?

분류에서Dev

typescript 클래스의 react 컴포넌트 안에 정의 된 함수를 호출하는 방법은 무엇입니까?

분류에서Dev

Xcode의 클래스 외부에서 ObjC 함수를 만드는 방법은 무엇입니까?

분류에서Dev

React.js : 클래스 기반 컴포넌트를 함수로 변환하는 방법은 무엇입니까?

분류에서Dev

PyCharm의 클래스에서 함수를 아래 (위)로 이동하는 방법은 무엇입니까?

분류에서Dev

C ++의 클래스에서 함수 메서드를 재귀 적으로 호출하는 방법은 무엇입니까?

분류에서Dev

React / Next js에서 함수를 기반으로 CSS 클래스를 추가하는 방법은 무엇입니까?

분류에서Dev

클래스에 대한 포인터로 함수를 호출하는 방법은 무엇입니까?

분류에서Dev

함수 외부에서 함수 내부의 함수를 호출하는 방법은 무엇입니까?

분류에서Dev

Django / Python : 자식 클래스 내의 부모 클래스에서 함수를 호출하는 방법은 무엇입니까?

분류에서Dev

uglify.js 문제없이 NPM에 클래스 인 React Component를 게시하는 방법은 무엇입니까?

분류에서Dev

Kotlin의 내부 클래스에서 조각 메서드를 호출하는 방법은 무엇입니까?

분류에서Dev

onclick 앵커 태그가 호출하는 함수에 div ID, 클래스를 매개 변수로 전달하는 방법은 무엇입니까?

분류에서Dev

객체 리터럴 foo 외부에서 foo 내부 메서드의 내부 함수를 호출하는 방법은 무엇입니까? (아래 코드 참조)

분류에서Dev

PHP에서 다른 클래스를 작동시키기 위해 클래스의 함수를 호출하는 방법은 무엇입니까?

분류에서Dev

JAVA에서 리플렉션을 사용하여 다른 클래스의 클래스 함수를 호출하는 방법은 무엇입니까?

분류에서Dev

Python : 클래스 외부에서 메서드를 호출하는 방법은 무엇입니까?

분류에서Dev

Python : 클래스 외부에서 메서드를 호출하는 방법은 무엇입니까?

분류에서Dev

기본 클래스에서 파생 클래스 함수를 호출하는 방법은 무엇입니까?

Related 관련 기사

  1. 1

    외부 클래스에서 내부 클래스의 함수를 호출하는 방법은 무엇입니까?

  2. 2

    React의 자식 구성 요소에서 onchange 이벤트로 부모 클래스 구성 요소의 함수를 호출하는 방법은 무엇입니까?

  3. 3

    클래스 함수를 클래스 외부로 이동하고 React에서 this 키워드를 사용하는 방법은 무엇입니까?

  4. 4

    한 클래스에서 다른 클래스의 함수를 호출하는 방법은 무엇입니까?

  5. 5

    React를 사용하여 외부에서 정의 된 자바 스크립트 함수를 호출하는 방법은 무엇입니까?

  6. 6

    React에서 클래스 안에있는 함수를 호출하는 방법은 무엇입니까?

  7. 7

    React Native로 제출 한 후 useEffect에서 비동기 함수를 호출하는 방법은 무엇입니까?

  8. 8

    React Native에서 컴포넌트 클래스의 함수와 데이터를 Stateless 클래스로 전달하는 방법은 무엇입니까?

  9. 9

    수퍼 클래스의 프로토콜 함수를 호출하는 방법은 무엇입니까?

  10. 10

    클래스 정의 내에서 포인터 멤버 함수를 호출하는 방법은 무엇입니까?

  11. 11

    다른 화면 클래스에서 Python으로 함수를 호출하는 방법은 무엇입니까?

  12. 12

    typescript 클래스의 react 컴포넌트 안에 정의 된 함수를 호출하는 방법은 무엇입니까?

  13. 13

    Xcode의 클래스 외부에서 ObjC 함수를 만드는 방법은 무엇입니까?

  14. 14

    React.js : 클래스 기반 컴포넌트를 함수로 변환하는 방법은 무엇입니까?

  15. 15

    PyCharm의 클래스에서 함수를 아래 (위)로 이동하는 방법은 무엇입니까?

  16. 16

    C ++의 클래스에서 함수 메서드를 재귀 적으로 호출하는 방법은 무엇입니까?

  17. 17

    React / Next js에서 함수를 기반으로 CSS 클래스를 추가하는 방법은 무엇입니까?

  18. 18

    클래스에 대한 포인터로 함수를 호출하는 방법은 무엇입니까?

  19. 19

    함수 외부에서 함수 내부의 함수를 호출하는 방법은 무엇입니까?

  20. 20

    Django / Python : 자식 클래스 내의 부모 클래스에서 함수를 호출하는 방법은 무엇입니까?

  21. 21

    uglify.js 문제없이 NPM에 클래스 인 React Component를 게시하는 방법은 무엇입니까?

  22. 22

    Kotlin의 내부 클래스에서 조각 메서드를 호출하는 방법은 무엇입니까?

  23. 23

    onclick 앵커 태그가 호출하는 함수에 div ID, 클래스를 매개 변수로 전달하는 방법은 무엇입니까?

  24. 24

    객체 리터럴 foo 외부에서 foo 내부 메서드의 내부 함수를 호출하는 방법은 무엇입니까? (아래 코드 참조)

  25. 25

    PHP에서 다른 클래스를 작동시키기 위해 클래스의 함수를 호출하는 방법은 무엇입니까?

  26. 26

    JAVA에서 리플렉션을 사용하여 다른 클래스의 클래스 함수를 호출하는 방법은 무엇입니까?

  27. 27

    Python : 클래스 외부에서 메서드를 호출하는 방법은 무엇입니까?

  28. 28

    Python : 클래스 외부에서 메서드를 호출하는 방법은 무엇입니까?

  29. 29

    기본 클래스에서 파생 클래스 함수를 호출하는 방법은 무엇입니까?

뜨겁다태그

보관