当同时提交和删除表单时，react中的奇怪行为

Question

我有一个提交一些数据表单，我有一个项目组件，它有一个删除项目的删除按钮，但当我提交一些东西时，它会同时提交和删除项目

import React, {Component} from 'react';
import ApiClient from './apiClient';
import './MessageForm.css';

class MessageForm extends Component {
    constructor(props){
        super(props);
        this.state = {
            submitted: false
        }
    }

    handleSubmit = async (event) => {
        event.preventDefault();
        const messageData = new FormData(event.target);
        await ApiClient.addMessage({
            license_plate: messageData.get('license'),
            body: messageData.get('body')
        });
        // console.log("submitted");
        // this.props.refreshList();
    };

    render() {
        return(
            <form onSubmit={this.handleSubmit} className="MessageForm">
                <div>
                    <label htmlFor="license">License Plate</label>
                    <input id="license" name="license" type="text" />
                </div>
                <div>
                    <label htmlFor="body">Message</label>
                    <textarea id="body" name="body" type="text"/>
                </div>
                <div>
                    <input type="submit" value="Submit"/>
                </div>
            </form>
        )
    }
};


export default MessageForm;

这是item组件

import React from 'react';
import moment from 'moment';
import SocailShare from './SocialShare.css'
import { FacebookShareButton, LinkedinShareButton,
  TwitterShareButton,
  TelegramShareButton,
  WhatsappShareButton,
  EmailShareButton,} from 'react-share';
import { FacebookIcon, EmailIcon,
  TwitterIcon,
  TelegramIcon,
  WhatsappIcon,
  LinkedinIcon,} from 'react-share';
  import {
    FacebookShareCount,
    PinterestShareCount,
    VKShareCount,
    OKShareCount,
    RedditShareCount,
    TumblrShareCount,
  } from 'react-share';
import './MessageItem.css';

export default ({ id, submission_date, license_plate, body, handleDelete }) => {
    var timePosted = moment(submission_date).format('DD/MM/YYYY - HH:mm');


    const onDelete = (id) => {
      handleDelete(id);
    }


    return (
        <li className="MessageItem">
            <span>Time: {timePosted} - </span>
            <span>To license: {license_plate} : </span>
            <span> {body} </span>
            <button onClick={onDelete(id)}>X</button>
            <div className="SocialShare">
            <FacebookShareButton  url="https://github.com/nygardk/react-share#readme" >
           <FacebookIcon size={30}/> 
           <FacebookShareCount url="https://github.com/nygardk/react-share#readme">
           {shareCount => (
    <span className="myShareCountWrapper">{shareCount}</span>
  )}
           </FacebookShareCount>
           </FacebookShareButton>
           <TwitterShareButton  url="https://github.com/nygardk/react-share#readme">
              <TwitterIcon size={30}/>
           </TwitterShareButton >
           <EmailShareButton  url="https://github.com/nygardk/react-share#readme">
             <EmailIcon size={30}/>
           </EmailShareButton>

            </div>

        </li>
    );
};

这是呈现消息项的消息列表组件

import React, { Component } from 'react';
import './MessageList.css';
import MessageItem from './MessageItem';
import ApiClient from './apiClient'


class MessageList extends Component {

    constructor(props) {
        super(props);

    }

    handleOnDelete = async (id) => {
      console.log(id + "deleted")
      await ApiClient.deleteMessage(id);
      this.props.refreshList();
    }
    render() {
        const {
            messages
        } = this.props;

        messages.sort(function(a,b){
            //the list will be ordered in descending date order (most recent first)
            return new Date(b.submission_date) - new Date(a.submission_date);
          });

        const $messages = messages.map((message) => <MessageItem handleDelete={this.handleOnDelete} key={message._id} {...message} />);

        return (
          <section className="MessageList">
            <h1>Message Board</h1>
             <ul>
                {$messages}
            </ul>
          </section>
        )
    }
}

export default MessageList;

这是应用程序组件，其中呈现了所有内容

import React, { Component} from 'react';
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import ApiClient from './apiClient';
import './App.css';
import MessageForm from './MessageForm';
import MessageList from './MessageList';


class App extends Component {
  constructor(props){
    super(props);
    this.state = {
        messages: []
      }
  }

  componentDidMount = async () => {
    this.refreshList();
  }

  refreshList = async () =>  {
    const messages = await ApiClient.getMessages();
    this.setState({
        messages
    })
  }


  render () {
    return (
      <BrowserRouter>
        <div className="App">
          <header className="App-header">
            <h1>Hello License</h1>
            <p>Send your messages to a plate number easily!</p>
          </header>
          <MessageForm refreshList = {this.refreshList}/>
        </div>
        <Switch>
          <Route exact path="/api"  render ={props => <MessageList refreshList = {this.refreshList} messages={this.state.messages} {...props}/> }/>
        </Switch>
      </BrowserRouter>
    )
  }
};

export default App;

Answer 1

在item组件中，<button onClick={onDelete(id)}>X</button>这一行就是您的问题所在。

您无意中说的是，当DOM呈现此组件时，它应该立即调用onDelete，并且onClick处理程序将引用void。为了避免这种情况，您需要传入一个如下所示的函数：<button onClick={(id) => onDelete(id)}>X</button>