Перезагрузить дочерний компонент, только если данные передаются из родительского - PullRequest
Новая
       41

Перезагрузить дочерний компонент, только если данные передаются из родительского

0 голосов
/ 13 апреля 2020

Таким образом, у меня есть 2 родственных компонента, визуализируемых App.jsx. Когда я щелкаю элемент внутри компонента BookList, App.jsx делает запрос к бэкэнду, чтобы получить данные о выбранных элементах. Затем я передаю эти данные во второй компонент. Второй компонент - это редактор Slate JS, а передаваемые ему данные - это объект JSON, который должен отображаться в редакторе. Тем не менее, я изо всех сил пытаюсь придумать, как перезагрузить компонент редактора с этими данными.

App.jsx 

const App = () => {
  const [books, setBooks] = useState([]);
  const [content, setContent] = useState('');

  const getBooksList = useCallback({*fetch 1*}, [setBooks])
  const getBookContentFromTitle = useCallback({*fetch 2*}, [setContent])

  return (
    <React.Fragment>
      <NavBar />
      <div>
        <BooksList books={books} getBooksList={getBooksList} getBookContentFromTitle={getBookContentFromTitle} />
        <TextEditor getBooksList={getBooksList} bookContent={content}/>
      </div>
    </React.Fragment>
  )
}

Так что getBookContentFromTitle выбирает нужный мне контент и работает правильно. Моя проблема в том, что мне нужно загрузить эти данные в компонент TextEditor (как это было сделано с bookContent={content}), а затем обновить sh этот компонент. Это refre sh необходимо выполнять только в том случае, если переменная content определена или изменена (ie, элемент был выбран в компоненте BookList или другой элемент из BookList был выбран). Вот TextEditor, который у меня есть:

TextEditor.jsx 

const TextEditor = ({getBooksList, bookContent}) => {
  const [content, setContent] = useState(
    JSON.parse(localStorage.getItem('content')) || [
      {
        type: 'paragraph',
        children: [{ text: '' }],
      },
    ]
  )    

  return (
    <React.Fragment>
      <div>
        <Slate
          editor={editor} 
          value={content} 
          onChange={content => {
            setContent(content)
            const localContent = JSON.stringify(content)
            localStorage.setItem('content', localContent)
            }}      
          >
            <Editable
              editor={editor}
              renderElement={renderElement}
              renderLeaf={renderLeaf}
            />
          </Slate>
        </div>
      </React.Fragment>
    )
}

Итак, выше приведен TextEditor компонент с зачисткой. Я уверен, что функция должна быть передана в JSON.parse() в состоянии содержимого, которое проверяет, что-то определено или изменено? Но я совершенно не уверен, как с этим справиться.

Спасибо!

...