反应 | 收集子数组的状态值并更新每个对象并保存到 PouchDB

Question

堆栈溢出

问题

我有单独的组件来存放Tiptap 编辑器表。 起初我为每个子组件都有一个保存按钮，它工作正常，但对用户不友好。 我想要一个统一的保存按钮，它将遍历每个子 Table 组件并将它们的所有editor.getJSON()数据汇集到单个doc object的sections数组中。 然后通过将整个对象保存到PouchDB来完成它

我尝试了什么？

链接到 repo → wchorski/Next-Planner：基于 NextJS 构建的用于规划事件的 CRM (github.com)

尝试#1

我尝试使用useRef挂钩和useImperativeHandle来调用并返回editor.getJSON() 。 但是使用Array Ref使我头疼。 我会发布一些我想要的代码

// Parent.jsx
const childrenRef = useRef([]);
childrenRef.current = []


  const handleRef = (el) => {
    if(el && !childrenRef.current.includes(el)){
      childrenRef.current.push(el)
    }
  }

  useEffect(() =>{
      childrenRef.current[0].childFunction1() // I know this doesn't work, because this is where I gave up
  })

// Child.jsx
useImperativeHandle(ref, () => ({
    childFunction1() {
      console.log('child function 1 called');
    },
    childFunction2() {
      console.log('child function 2 called');
    },
  }))

尝试 #2

我设置了一个状态计数器并将其作为 prop 传递给Child Component 。 然后我更新计数器以触发子函数

// Parent.jsx
export const Planner = ({id, doc, rev, getById, handleSave, db, alive, error}) => {

    const [saveCount, setSaveCount] = useState(0)
    
    const  handleUpdate = () =>{
        setSaveCount(prev => prev + 1)
    }

  const isSections = () => {
    if(sectionsState[0]) handleSave(sectionsState)
    if(sectionsState[0] === undefined) console.log('sec 0 is undefined', sectionsState)
  }

  function updateSections(newSec) {

    setsectionsState(prev => {
      const newState = sectionsState.map(obj => {
        if(!obj) return

        if (obj.header === newSec.header) {
          return {...obj, ...newSec}
        }

        // 👇️ otherwise return object as is
        return obj;
      });
      console.log('newState', newState);
      return newState;
    });
  }

  useEffect(() => {
    setsectionsState(doc.sections)

  }, [doc])
  
  return (<>

    <button 
      title='save'
      className='save'
      onPointerUp={handleUpdate}>
        Save to State <FiSave />
    </button>
    
    <button 
      style={{right: "0", width: 'auto'}}
      title='save'
      className='save'
      onClick={isSections}>
        Save to DB <FiSave />
    </button>

  
    {doc.sections.map((sec, i) => {

      if(!sec) return 

      return (

          <TiptapTable 
            key={i}
            id={id} 
            rev={doc.rev}
            getById={getById}
            updateSections={updateSections}
            saveCount={saveCount}
            section={sec} 
            db={db} 
            alive={alive} 
            error={error} 
          />

      )
    })}
  </>)

// Child.jsx
export const TiptapTable = ((props, ref) => {

  const {id, section, updateSections, saveCount} = props

  const [currTimeStart, setTimeStart] = useState()
  const [defTemplate, setdefTemplate] = useState('<p>loading<p>')
  const [isLoaded, setIsLoaded] = useState(false)
  const [notesState, setnotesState] = useState('')

  const editor = useEditor({
    extensions: [
      History,
      Document,
      Paragraph,
      Text,
      Gapcursor,
      Table.configure({
        resizable: true,
      }),
      TableRow.extend({
        content: '(tableCell | tableHeader)*',
      }),
      TableHeader,
      TableCell,
    ],
    // i wish it was this easy
    content: (section.data) ? section.data : defTemplate,

  }, [])

  const  pickTemplate = async (name) => {
    try{
      const res = await fetch(`/templates/${name}.json`,{
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
        },
      });
            const data = await res.json()
      
      setIsLoaded(true)
      setdefTemplate(data)
      console.log('defTemplate, ', defTemplate);
      // return data

    } catch (err){
      console.warn('template error: ', err);
    }
  }

  function saveData(){

    console.log(' **** SAVE MEEEE ', section.header);
    try{
      const newSection = {
        header: section.header,
        timeStart: currTimeStart,
        notes: notesState,
        data: editor.getJSON(),
      }

      updateSections(newSection)

    } catch (err){
      console.warn('table update error: ', id, err);
    }
  }

  useEffect(() => {

    // 👇️ don't run on initial render
    if (saveCount !== 0) saveData()
    
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [saveCount])
  


  useEffect(() => {
    setTimeStart(section.timeStart)
    setnotesState(section.notes)

    if(!section.data) pickTemplate(section.header).catch(console.warn)
 
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [id, section, isLoaded])

  useEffect(() => {
    if (editor && !editor.isDestroyed) {

      if(section.data) editor.chain().focus().setContent(section.data).run()

      if(!section.data) editor.chain().focus().setContent(defTemplate).run()

      setIsLoaded(true)
      
    }
  }, [section, defTemplate, editor]);


  if (!editor) {
    return null
  }

  return isLoaded ? (<>

    <StyledTableEditor>

      <div className="title">
        <input type="time" label='Start Time' className='time' 
          onChange={(e) => setTimeStart(e.target.value)}

          defaultValue={currTimeStart}
        />

        <h2>{section.header}</h2>

      </div>

      <EditorContent editor={editor} className="tiptap-table" ></EditorContent>
      // ... non relavent editor controls

          <button 
            title='save'
            className='save2'
            onPointerUp={() => saveData()}>
              Save <FiSave />
          </button>
        </div>

      </nav>

        
    </StyledTableEditor>
  </>) 
  : null
})
TiptapTable.displayName = 'MyTiptapTable';

我所期望的

我期望的是父状态就地更新，但它覆盖了以前的表。 此外，一旦它写入PouchDB ，它就不会写入任何新数据，只是解析回以前的数据，但具有更新的_rev修订号。

从理论上讲，我认为我更喜欢使用useImperativeHandle的useRef钩子将数据从孩子传递给父母。

看起来这个问题很相似，但没有以编程方式梳理孩子

Answer 1

我意识到我可以问一个更精确的问题，但我不会开始一个新问题，而是根据我所学的知识回答我自己的问题。

问题是

当我迭代和更新主Doc 对象时，我没有使用React 的setState钩子

感谢这篇文章帮助我解决了这个问题。

// Parent.jsx
import React, {useState} from 'react'
import { Child } from '../components/Child'


export const Parent = () => {
  
  const masterDoc = {
    _id: "123",
    date: "2023-12-1",
    sections: [
      {header: 'green', status: 'old'},
      {header: 'cyan', status: 'old'},
      {header: 'purple', status: 'old'},
    ]
  }


  const [saveCount, setSaveCount] = useState(0)
  const [sectionsState, setsectionsState] = useState(masterDoc.sections)


  function updateSections(inputObj) {

    setsectionsState(prev => {
      const newState = prev.map(obj => {
        // 👇️ if id equals 2, update country property
        if (obj.header === inputObj.header) 
          return {...obj, ...inputObj}

        return obj;
      });

      return newState;
    });
  }

  return (<>
    <h1>Parent</h1>

    {sectionsState.map((sec, i) => {

      if(!sec) return 

      return (

        <Child 
          key={i}
          section={sec}
          updateSections={updateSections}
          saveCount={saveCount}
        />
      )
    })}

    <button
      onClick={() => setSaveCount(prev => prev + 1)}
    >State dependant update {saveCount}</button>
  </>)
}

// Child.jsx
import React, {useEffect, useState, forwardRef, useImperativeHandle} from 'react'

export const Child = forwardRef((props, ref) => {

  const {section, updateSections, saveCount} = props

  const [statusState, setStatusState] = useState(section.status)


  function modData() {

    const obj = {
      header: section.header, 
      status: statusState
    }
    updateSections(obj)
  }


  useEffect(() => {

    // 👇️ don't run on initial render
    if (saveCount !== 0) modData()
    
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [saveCount])

  return (<>
    <span style={{color: section.header}}>
      header: {section.header}
    </span>
    <span>status: {section.status}</span>

    <input 
      defaultValue={section.status} 
      onChange={(e) => setStatusState(e.target.value)}
    />

    ________________________________________
    
  </>)
})

Child.displayName = 'MyChild';