如何阻止我的 React 應用程序根據輸入字段不斷更新元素？

Question

在我參與的這個程序中，我們目前正在開發一個“twitter 克隆”，但沒有后端。 我們試圖純粹使用 React 讓它看起來像 Twitter 並成為它的模型。

目前，我們有一個輸入字段和一個“tweet”按鈕。 然而，發生的情況是我們輸入一些內容，按下推文，然后每條推文都會隨着輸入字段的每次更改而更新。 我們如何阻止它這樣做，並且只顯示我們按下推文時的每條推文？ 下面是我的 Feed 組件，下面是我的 Tweet 組件：

Feed.js：

// // import {Component} when building a class component
import React, {Component} from 'react';
// // importing our CSS file from src>css
import '../css/Feed.css';
import Tweets from './Tweets';

const GENERIC_Tweets_USERNAME = "Username" , GENERIC_Tweets_BODY = "Body", GENERIC_Tweets_TIMESTAMP = "Timestamp"; 
class Feed extends Component {
    // // constructor method available to us in class components
  constructor() {
    super();
    this.state = {
      tweets: [],
      username: GENERIC_Tweets_USERNAME,
      body: GENERIC_Tweets_BODY,
      timestamp: GENERIC_Tweets_TIMESTAMP,
    }
  }
  addTweets() {
    console.log(this.state.body);
 
    let tweets = this.state.tweets;
    tweets.push(
      {
        id: Date.now()
      }
    );
    this.setState(
      {
        tweets: this.state.tweets
      }
    );
  }
  handleTweet = (event) => {
    this.setState({body:event.target.value});
    console.log(this.state.body);
  }
  deleteTweets(id){
    let newTweetsArr = this.state.tweets;
    newTweetsArr.map((tweets, index) => {
      if (id === tweets.id) {
        newTweetsArr.splice(index,1);
      }
    });
    this.setState(
      {
        tweets: newTweetsArr
      }
    );
  }

  

  // // render method - render what is returned (JSX) onto the browser
  render() {
    return (
      <div>
        <div className="div-board">
          <div className="row">
          <div>
            <input onChange={this.handleTweet} placeholder="What's Happening?"></input>
        </div>
        <div>
     {this.state.description}
     <button className="btn btn-success add-button" onClick={this.addTweets.bind(this)}>
       Tweet
     </button> 
   </div>
            {
              this.state.tweets.map(tweets => {
                return <Tweets key={tweets.id} id={tweets.id} deleteHandler={this.deleteTweets.bind(this)} body={this.state.body} />
              })
            }
          </div>
        </div>
      </div>
    );
  }
}
export default Feed;

推文.js：

import React, {Component} from 'react';
import PropTypes from 'prop-types';
// const GENERIC_Tweets_USERNAME = "Username" , GENERIC_Tweets_BODY = "Body", GENERIC_Tweets_TIMESTAMP = "Timestamp"; 
class Tweets extends Component {
    // // ignore constructor method for now
  constructor(props) {
    super(props);
    this.usernameContent = React.createRef();
    this.bodyContent = React.createRef();
    this.timestampContent = React.createRef();
    this.state = {
      // username: GENERIC_Tweets_USERNAME,
      // body: GENERIC_Tweets_BODY,
      // timestamp: GENERIC_Tweets_TIMESTAMP,
      // editMode: false
    }
  }  
  // handleSave() {
  //   this.setState({
  //     username: this.usernameContent.current.value,
  //     body: this.bodyContent.current.value,
  //     timestamp: this.timestampContent.current.value,
  //     // editMode: false
  //   });
  // }
  handleDelete() {
    this.props.deleteHandler(this.props.id);
  }
//   // render method return JSX
render(){
    let usernameElement, bodyElement, timestampElement, buttonArea; 
    // if (this.state.editMode){
    //   usernameElement = <textarea ref={this.usernameContent} className="username-textarea" defaultValue={this.state.username}></textarea>;
    //   bodyElement = <textarea ref={this.bodyContent} className="body-textarea" defaultValue={this.state.body}></textarea>;
    //   timestampElement = <textarea ref={this.timestampContent} className="timestamp-textarea" defaultValue={this.state.timestamp}></textarea>;
    //   buttonArea = <div><button className="btn btn-primary" onClick={this.handleSave.bind(this)}>Save</button></div>;
    // }
    // else{
      usernameElement = <h5 className="card-username">{this.props.username}</h5>;
      bodyElement = <p>{this.props.body}</p>; 
      console.log(this.props);
      timestampElement = <p>{this.props.timestamp}</p>;
      buttonArea = <div>
      <button className="btn btn-danger" onClick={this.handleDelete.bind(this)}>Delete</button>
      </div>;
    // }
    return (
      <div className='col-sm-6'>
        <div className="card card-view">
          <div className="card-synopsis">
                {usernameElement}
                {bodyElement}
                {timestampElement}
                {buttonArea}
          </div>
        </div>
    </div>
    );
  }
}
// Tweets.defaultProps = {
//     username: "Username",
//    body: "Body",
//     timestamp: "Timestamp",
  // };
  Tweets.propTypes = {
    username: PropTypes.string
  };
  export default Tweets;```

Answer 1

首先，更新您的 function，方法是添加 body 參數並從現有 body 中創建一個新數組，而不是對其進行變異。 此外，如果您將 function 編寫為匿名的，則不必將其綁定this它（在 render() 函數中）：

 addTweets = () => {
    this.setState({
        tweets: this.state.tweets.concat({  id: Date.now(), body: this.state.body }),
        body: ''
      });
  }

然后，更正您的render() function：

 {
              this.state.tweets.map(tweets => {
                return <Tweets key={tweets.id} id={tweets.id} deleteHandler={this.deleteTweets.bind(this)} body={tweets.body} />
              })
  }