Как вызвать функцию удаления с параметром (_id) вне класса в реаги js?

Question

Это то, что я пробовал? Я хотел вызвать функцию 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>
        )
    }
}

Answer 1

Вы можете передать ссылку на this.deleteDebtor в качестве реквизита.

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

update

Я думаю, что у вас есть проблема с областью видимости, измените нормальную функцию внутри map на стрелку функция:

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