React表单提交及输入时阻止笔记日期自动刷新的实现方法

• AddNote组件的render方法内直接执行new Date().toLocaleDateString()，只要父组件Note因输入、新增/删除笔记触发重渲染，所有已渲染的AddNote都会重新执行render逻辑，每次都会取当前最新时间，日期自然会变。
• 现有notes数组仅存储笔记文本内容，没有在笔记创建时就把生成时间作为笔记自身属性持久化存储，渲染时临时计算时间必然无法固定。

核心思路是把日期作为笔记数据的一部分，在创建笔记时就固定存入状态，渲染时直接读取存好的值，不在render阶段临时计算，具体改动如下：

1. 调整新增笔记逻辑，提交表单时将笔记文本、创建瞬间生成的固定日期、唯一标识组装成对象存入notes数组
2. 移除AddNote组件内临时计算日期的代码，改为接收父组件传入的预存固定日期
3. 修正列表渲染的key规则，用笔记唯一id替代数组下标，避免删除笔记时出现组件状态错位
4. 移除冗余的全局isTextDisplayed状态：存入notes数组的笔记本身就是需要展示的，不需要额外全局状态控制

修改后完整代码 #

Note父组件 #

class Note extends React.Component {
    constructor(props) {
      super(props);
      this.state = { value: "", notes: [] };
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
      this.handleDeleteNote = this.handleDeleteNote.bind(this);
    }
    handleChange(event) {
      this.setState({ value: event.target.value });
    }
    handleSubmit(event) {
      event.preventDefault();
      // 组装新笔记数据，创建时就固定日期
      const newNote = {
        id: Date.now(),
        content: this.state.value,
        createDate: new Date().toLocaleDateString()
      };
      this.setState({
        notes: [newNote, ...this.state.notes],
        value: ""
      });
    }
    handleDeleteNote(targetId) {
      this.setState({
        notes: this.state.notes.filter(note => note.id !== targetId)
      });
    }
    render() {
      return (
        <React.Fragment>
          <div className="title">
            <h1>Notes</h1>
            <span className="LineTitle"></span>
          </div>
          <form id="form" onSubmit={this.handleSubmit}>
            <textarea
              className="textNote"
              id="textZone"
              value={this.state.value}
              onChange={this.handleChange}
              required
            ></textarea>
            <button type="submit" className="addBtn">
              Ajouter
            </button>
          </form>
          {this.state.notes.map((note) => (
            <AddNote
              key={note.id}
              content={note.content}
              createDate={note.createDate}
              noteId={note.id}
              handleDeleteNote={this.handleDeleteNote}
            />
          ))}
        </React.Fragment>
      );
    }
  }
export default Note;

AddNote子组件 #

class AddNote extends React.Component {
    render() {
        return (
            <React.Fragment>
                <h3 className="NoteDetails">
                    {this.props.createDate}
                </h3>
                <span className="NoteLine"></span>
                    <div className="notes">
                        <p>{this.props.content}</p>
                    </div>
                    <button
                        type="button"
                        className="deleteBtn"
                        onClick={() => this.props.handleDeleteNote(this.props.noteId)}
                    >
                        Supprimer
                    </button>
            </React.Fragment>
        );
    }
}
export default AddNote;

修改后效果：单条笔记的日期仅在提交创建时生成一次，后续输入文本、新增/删除其他笔记触发的组件重渲染，都会直接读取预存的固定日期，不会再自动更新为最新时间。

内容的提问来源于stack exchange，提问作者LAYAN_Jason