#javascript #reactjs
#javascript #reactjs
Вопрос:
У меня нет синтаксической ошибки, и код компилируется нормально, но вызываемый функциональный компонент «SuccessfulModal» никогда не отображается.
мой функциональный компонент
import React from 'react'
export default function SuccessfulModal() {
const hello = () => {
return alert("Welcome :)")
}
return (
<div>
{hello()}
</div>
)
}
мой компонент класса
import SuccessfulModal from "../successfulModal/SuccessfulModal"
export default class ConfirmationModal extends Component {
state = {
open: false,
revisionId: ""
}
saveOnClick = () => {
axios.put('http://localhost:8080/lagbevakning/revision/revisionsubscription', {
revisionId: 36,
})
.then((response) => {
console.log(response) /* Gets called */
this.setState({open: false}) /* Gets called */
return <SuccessfulModal/> /* Never gets called */
})
submitorCancelButton = () => (
<Button className="saveButton" onClick={this.saveOnClick}> Save </Button>
)
Метод визуализации
render() {
return (
<div>
{this.submitorCancelButton()}
</div>
)
}
Комментарии:
1. Это не так, как работает React…… Если у вас нет
render
метода в вашем классе, ничто никогда не будет отображаться..2. Пожалуйста, покажите метод рендеринга для
ConfirmationModal
(если он существует) — невозможно понять, почему он отображается неправильно, если вы не показываете нам, что вы визуализируете!3. мои извинения, пожалуйста, посмотрите по-новому.
Ответ №1:
То, что вы возвращаете из функции, указанной then
в вашем запросе axios, не используется при рендеринге компонента.
Вместо этого вы можете изменить часть состояния и использовать ее в методе визуализации, чтобы выяснить, следует ли вам отображать ваш SuccessfulModal
компонент или нет.
Пример
const { useEffect } = React;
function SuccessfulModal() {
const hello = () => {
alert("Welcome :)");
};
useEffect(hello, []);
return <div>SuccessfulModal</div>;
}
class ConfirmationModal extends React.Component {
state = {
open: false
};
componentDidMount() {
setTimeout(() => {
this.setState({ open: true });
}, 1000);
}
render() {
return this.state.open ? <SuccessfulModal /> : null;
}
}
ReactDOM.render(<ConfirmationModal />, document.getElementById("root"));
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>
Ответ №2:
Проблема в том, что вы просто возвращаете его в метод;
вместо этого попробуйте добавить к состоянию showModal
значение false, а затем, когда запросы и просто установите showModal: true
, и в вашем методе рендеринга добавьте, что если showModal
true, то render `:
state = {
open: false,
revisionId: "",
showModal: false
}
saveOnClick = () => {
axios.put('http://localhost:8080/lagbevakning/revision/revisionsubscription', {
revisionId: 36,
})
.then((response) => {
console.log(response) /* Gets called */
this.setState({
open: false,
showModal: true
}) /* Gets called */
})
render(){
const { showModal } = this.state;
return (
{ showModal amp;amp; <SuccessfulModal />}
)
}```
Ответ №3:
Я думаю, проблема в том, что вы возвращаете элемент, а не визуализируете его. Он должен отображаться в DOM, поскольку у него нет метода render. В вашем случае, если бы вам нужно было выполнить рендеринг для этого, вы бы сделали
Сделайте npm install react-dom
, а затем, если вы используете ES6, вы можете сделать:
import ReactDOM from 'react-dom';
или, если вы используете ES5, вы можете просто сделать:
var ReactDOM = require('react-dom')
Я бы изменил последнюю строку на
ReactDOM.render(<SuccessfulModal/>, document.getElementById('root');
Теперь элемент может отображаться (при условии, что root является основным подразделением вашего приложения).