Обновление переменной JSX не отображается на странице

Question

Я пытаюсь добавить переменную JSX на страницу. Сначала я инициализировал его как null, потому что он может быть потенциально неиспользуемым, но я хочу добавить JSX на страницу, если событие инициируется. Обработчик выполняется, когда пользователь заканчивает ввод текста и закрывает модальное окно. Я могу успешно получить их текст до этой функции-обработчика ниже, но по какой-то причине JSX переменной не отражается на текущей странице после закрытия модала.

let other = null;

const handler = (text) => {
    other = (
        <li>
            <span className="bold">Other: </span>
            {text}}<span className="right">Price Unknown</span>
        </li>
    );
};

Позже я просто использую эту переменную в моем JSX

<div className="other">
    {other}
</div>

Почему именно это обновление не отображается на странице после закрытия модального окна? Там, где я ожидаю, что добавленный элемент списка будет пустым, как будто {other} все еще ссылается на null. Это проблема со страницей, которую нужно перерисовать?

Answer 1

вам нужно вызвать функцию-обработчик и вернуть HTML, который вы хотите отрендерить. Кроме того, если вы пытаетесь обновить переменную и отобразить ее, используйте setState для компонента на основе классов или [stateName, stateUpdateMethod] = useState(null) для функциональных компонентов, а затем используйте stateUpdateMethod для запуска повторного рендеринга.

import React from "react";
import ReactDOM from "react-dom";

const handler = (text) => <div>{text}</div> 
const App = () => handler("I am the text")

const rootElement = document.getElementById("root");
ReactDOM.render(
  <App />,
rootElement
);

Answer 2

То, как вы используете переменную, неверно.

Я написал ответ на аналогичный вопрос здесь . Он показывает, как обновить представление и как объявить переменные.

Пожалуйста, проверьте ответ там и дайте мне знать, если у вас все еще есть вопросы.

Вот краткое резюме из ответа там :

Если вы также хотите обновить представление (в вашем случае), вам следует использовать метод state и setState при установке или изменении значения.

Пример:

class MyContainer extends Component {

    state = { testVarible: "this is a test" };

    onMove = () => {
        console.log(this.state.testVarible);
        this.setState({ testVarible: "new value" });
    }
}

Сказав это, я все еще чувствую, что вы усложняете то, что должно быть.

То, что вы должны сделать, это:

state = { text: 'some text' };
const handler = (text) => {
  this.setState({ text });
};

В то время как jsx должен иметь это :

<div className="other">
  <li>
    <span className="bold">Other: </span>{this.state.text}
    <span className="right">Price Unknown</span>
  </li>
</div>