Ответ: Почему эти компоненты не обновляются при изменении useState? (компоненты отображаются после монтирования приложения) - PullRequest
Новая
       92

Ответ: Почему эти компоненты не обновляются при изменении useState? (компоненты отображаются после монтирования приложения)

1 голос
/ 24 апреля 2020

Компоненты отображаются после монтирования приложения (причина в том, что эти компоненты должны быть вставлены в простой извлекаемый HTML)

Я вижу, что состояние изменилось, но элементы просто не реагируя на это

Есть ли какое-нибудь решение?

codesandbox 

import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";

export default function App() {
  const [elements, setElements] = useState("none");

  useEffect(() => {
    console.log("global useEffect: " + elements);
  }, [elements]);

  const Input = ({ setElements }) => (
    <>
      <input
        type="text"
        onChange={e => {
          setElements(e.target.value);
        }}
      />
      <div>{elements}</div>
    </>
  );
  const Elements = ({ elements }) => {
    useEffect(() => {
      console.log("Elements useEffect: " + elements);
    }, [elements]);
    return <span>{elements}</span>;
  };
  const Elements2 = ({ elements }) => <span>{elements}</span>;

  useEffect(() => {
    console.log("useEffect first time");
    ReactDOM.render(
      <Elements elements={elements} />,
      document.getElementById("elements")
    );
    ReactDOM.render(
      <Elements2 elements={elements} />,
      document.getElementById("elements2")
    );
    ReactDOM.render(
      <Input setElements={setElements} />,
      document.getElementById("inputId")
    );
  }, []);

  // need to split plainhtml, otherwise codesandbox
  // ...gives an error that is IMO a bug
  const plainhtml1 = `
  <div>
  <div>This plain html has been fetched</div>
  <div id="inputId" />
  </div>
  `;
  const plainhtml2 = `
  <div>
  <div>number of elements:</div>
  <div id="elements" />
  </div>
  `;
  const plainhtml3 = `
  <div>
  <div>number of other elements:</div>
  <div id="elements2" />
  </div>
  `;

  return (
    <div>
      <h1>Hello CodeSandbox</h1>
      <div dangerouslySetInnerHTML={{ __html: plainhtml1 }} />
      <div dangerouslySetInnerHTML={{ __html: plainhtml2 }} />
      <div dangerouslySetInnerHTML={{ __html: plainhtml3 }} />
    </div>
  );
}

1 Ответ

3 голосов
/ 24 апреля 2020

Элементы не знают, что состояние App изменяется при его изменении. Расскажите им об изменениях, используя эффект, подобный следующему: 

useEffect(() => {
   ReactDOM.render(
    <Elements elements={elements} />,
    document.getElementById("elements")
  );
  ReactDOM.render(
    <Elements2 elements={elements} />,
    document.getElementById("elements2")
  );
  ReactDOM.render(
    <Input setElements={setElements} />,
    document.getElementById("inputId")
  );
}, [elements, setElement]);

React будет вызывать эффект (и, следовательно, повторно отображать элементы) каждый раз, когда изменяются значения elements и setElements. На самом деле, поскольку у вас очень похожий эффект, вам просто нужно добавить elements в его список зависимостей (массив во втором аргументе).

...