Question

我没有语法错误，代码可以很好地编译，但是被调用的功能组件'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>
    )
  }

Answer 1

从axios请求中赋予then的函数中返回的内容不用于组件渲染。

您可以改为更改状态，并在render方法中使用该状态来确定是否应该渲染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>

Answer 2

问题在于您只是在方法上返回它；

相反，尝试将状态$order = wc_get_order( $order_id ); $items = $order->get_items(); $c1 = false; //boolean to check if your products exists in category1 $c2 = false; //same as above but for category2 foreach ( $items as $item ) { //loop through each product of the order before changing order status. if ( has_term( 'category1', 'product_cat', $item['product_id'] ) ){ $c1 = true; continue; } elseif( has_term( 'category2', 'product_cat', $item['product_id'] ) ) { $c2 = true; } } if($c1 && $c2)//if both categories are true set status3 $order->update_status( 'status3' ); elseif($c1)//if only c1 is true, set status1 $order->update_status( 'status1' ); else //c1 wasnt true so c2 must be, set status2 $order->update_status( 'status2' );添加为false，然后在请求中仅设置showModal并在您的render方法中添加，如果showModal: true为true，则渲染`：

showModal

Answer 3

我认为问题在于您正在返回元素而不是渲染它。由于它没有render方法，因此需要在DOM上进行渲染。在您的情况下，如果您必须对此进行渲染，则可以

执行npm install react-dom，然后，如果您使用的是ES6，则可以执行以下操作：

import ReactDOM from 'react-dom';

或者如果您使用的是ES5，则可以执行以下操作：

var ReactDOM = require('react-dom')

我将最后一行更改为

ReactDOM.render(<SuccessfulModal/>, document.getElementById('root');

现在该元素可以渲染了（假设root是您应用的主div）。

在类组件方法中使用功能组件

我的功能组件

我的班级组成部分

渲染方法

3 个答案: