React跨组件交互：点击Notes编辑按钮切换CreateNote组件div显隐

方案1：路由传参（适配当前点击Edit跳转到/create路由的场景） #

你当前代码中点击Edit按钮会跳转/create路由，直接通过React Router的路由状态传递编辑标识即可：

步骤1：修改Notes组件 #

1. 先导入路由跳转组件：

import { Link } from 'react-router-dom'

2. 替换原有Edit按钮的a标签，通过路由状态传递编辑参数：

// 原有button里的a标签替换为Link
<button>
  <Link 
    to="/create" 
    state={{ 
      isEdit: true, 
      editId: note._id, 
      editTitle: note.title, 
      editContent: note.content 
    }}
  >
    Edit
  </Link>
</button>

步骤2：修改CreateNote组件 #

1. 导入路由状态获取钩子，接收传递的编辑标识：

import { useLocation, useEffect } from 'react-router-dom'

2. 组件内部拿到编辑状态，回填表单同时控制div显隐：

function CreateNote(props) {
  const location = useLocation();
  // 拿到是否为编辑模式的标识，默认是创建模式
  const isEditMode = location.state?.isEdit || false;
  const [input, setInput] = useState({
    title: '',
    content:''
  })

  // 编辑模式下自动回填原有笔记内容
  useEffect(() => {
    if (isEditMode) {
      setInput({
        title: location.state.editTitle,
        content: location.state.editContent
      })
    }
  }, [isEditMode, location.state])

  // 原有逻辑不变，新增编辑提交逻辑即可
  function handleEditSubmit(event) {
    event.preventDefault();
    // 调用编辑接口提交修改即可
  }

  return (
    <div className="notes_form">
      <h1>{isEditMode ? '编辑笔记' : '创建笔记'}</h1>
      {/* 按需求控制两个div的显隐 */}
      {isEditMode && <div>编辑模式专属展示内容</div>}
      {!isEditMode && <div>创建模式专属展示内容</div>}
      <form>
        <div>
          <input onChange={handleChange} name="title" value={input.title} autoComplete="off" type="text" />
        </div>
        <div>
          <textarea onChange={handleChange} value={input.content}  autoComplete="off" name="content"  cols="30" rows="10"></textarea>
        </div>
        <button onClick={isEditMode ? handleEditSubmit : handleClick} >
          {isEditMode ? '保存修改' : 'ADD NOTE'}
        </button>
      </form>
    </div>
  )
}

方案2：状态提升（适配两个组件为同一个父组件下的兄弟组件场景） #

如果两个组件没有路由跳转，是同个父组件的子组件，直接把控制显隐的状态提到父组件即可：

1. 在共同父组件中定义共享状态：

// 父组件比如App.js
import { useState } from 'react'
import Notes from './notes'
import CreateNote from './createNotes'

function App() {
  const [isEditMode, setIsEditMode] = useState(false);
  const [currentEditNote, setCurrentEditNote] = useState({});
  return (
    <>
      <Notes setIsEditMode={setIsEditMode} setCurrentEditNote={setCurrentEditNote} />
      <CreateNote isEditMode={isEditMode} currentEditNote={currentEditNote} />
    </>
  )
}

2. Notes组件中点击编辑按钮时调用父组件传过来的方法修改状态：

function Notes(props) {
  // 原有逻辑不变，修改openUpdate函数
  function openUpdate(note) {
    props.setIsEditMode(true);
    props.setCurrentEditNote(note);
  }
  // 按钮点击时调用openUpdate传入当前note
  <button onClick={() => openUpdate(note)}>Edit</button>
}

3. CreateNote组件直接用props传过来的isEditMode控制div显隐即可，和方案1的显隐逻辑一致。

原有代码优化提示 #

你当前Notes组件的useEffect依赖项是notes，每次fetch更新notes后会重新触发useEffect，导致无限请求接口，建议把依赖项改为空数组[]，只在组件首次加载时拉取笔记列表。

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