请问为啥我的3D在渲染时没有出现渲染面板

Posted 2023-04-12

我的3D在渲染时没有出现渲染面板，那些数据还是在动的。要在上一次渲染结果那里才看得到效果

哦还是我告诉你吧
2个方法！
第一个方法：
1：首先选择你要渲染网格的物体！
2：然后点M进入材质球面板！
3：随便给它一个材质好了吧
4：在材质球的Shader BasicParameters面板下在Wire前面打上条
也就是渲染线框模式
5：shift+q渲染下试使
第二个方法：
直接打开渲染菜单快键是F10
在渲染菜单也就是Renderer菜单找到Force WireFrame并在前面打上条
也就是前置网格的意思，然后渲染下看看，所有东西都变成网格渲染的形式了！
希望能解决你的问题！ 参考技术A 1、下拉菜单【Rendering渲染】---【Show Last Rendering显示上次渲染结果】。

2、或者，下拉菜单【File文件】--【View Image File查看图像文件】，
在保存图片的文件夹打开查看。 参考技术B 可能出现问题找人看下 参考技术C 或者，下拉菜单【File文件】--【View Image File查看图像文件】，

为啥 useEffect 在第一次渲染时运行？

【中文标题】为啥 useEffect 在第一次渲染时运行？

【英文标题】：why is useEffect running on first render?为什么 useEffect 在第一次渲染时运行？

【发布时间】：2022-01-20 00:35:19

【问题描述】：

我有一个 MERN 反应组件，它会在我的用户创建新组后向他们展示祝酒词。

下面是我的useEffect

useEffect(() => 
    toast(
      <Fragment>
        New Group Created
      </Fragment>
    );
  , [successCreate]);

我只希望这个 useEffect 在我的用户创建一个新组之后运行。

它目前在第一次渲染时运行，并且在我的用户单击模态（子）然后触发 redux 的成功创建（只是创建一个新组）。

我怎样才能让 useEffect 仅在调用 successCreate 时运行.. 不在第一次渲染和 successCreate 时运行

这是我的组件

import React,  Fragment, useState, useEffect, useContext  from 'react';
import WizardInput from '../auth/wizard/WizardInput';
import useDispatch, useSelector from 'react-redux';
import  
  Button,
  Card,
  CardBody,
  Form,
  Label,
  Input,
  Media,
  Modal,
  ModalBody,
  ModalHeader
  from 'reactstrap';
import  FontAwesomeIcon  from '@fortawesome/react-fontawesome';
import Select from 'react-select';
import  toast  from 'react-toastify';
import makeAnimated from 'react-select/animated';
import listGroups, createGroup from '../../actions/index';
//import  isIterableArray  from '../../helpers/utils';
import  CsvUploadContext  from '../../context/Context';
import chroma from 'chroma'


const StepOneForm = ( register, errors, watch) => 
  const  upload, setUpload  = useContext(CsvUploadContext);
  //const  handleInputChange  = useContext(CsvUploadContext);
  const [ createGroupModal, setCreateGroupModal ] = useState(false)
  const [newGroup, setNewGroup] = useState(
    title: ''
  )
  const dispatch = useDispatch();
  const groups = useSelector(state => state.groups)

  const groupCreate = useSelector((state) => state.groupCreate)
  const success: successCreate = groupCreate

  const animatedComponents = makeAnimated();

  useEffect(() => 
    dispatch(listGroups())
  , [successCreate])

   useEffect(() => 
    toast(
      <Fragment>
        New Group Created
      </Fragment>
    );
  , [successCreate]);

  const customStyles = 
    control: (base, state) => (
      ...base,
      background: "light",
      // match with the menu
      borderRadius: state.isFocused ? "3px 3px 0 0" : 3,
      // Overwrittes the different states of border
      borderColor: state.isFocused ? "primary" : "light",
      // Removes weird border around container
      boxShadow: state.isFocused ? null : null,
      "&:hover": 
        // Overwrittes the different states of border
        borderColor: state.isFocused ? "blue" : "#2c7be5"
      
    ),
    
    menu: base => (
      ...base,
      // override border radius to match the box
      borderRadius: 0,
      // kill the gap
      marginTop: 0
    ),
    menuList: base => (
      ...base,
      // kill the white space on first and last option
      padding: 0,
      color: 'f9fafd'
    ),
    option: (styles,  data, isDisabled, isFocused, isSelected ) => 
      const color = chroma(data.color);
      return 
        ...styles,
        backgroundColor: isDisabled
          ? null
          : isSelected
          ? data.color
          : isFocused,
        color: '232e3c',
      ;
    
  
  ;

  const toggle = () =>  setCreateGroupModal(!createGroupModal)
  const closeBtn = (
    <button className="close font-weight-normal" onClick=toggle>
      &times;
    </button>
  );
  const handleSubmit = (e) => 
    e.preventDefault()
      dispatch(createGroup(newGroup))
      setCreateGroupModal(false)
   ;
 console.log(upload?.group)
   const handleChange = e => 
     setNewGroup(...newGroup, [e.target.name]: e.target.value)
   


  return (
    <Fragment>
      <Media className="flex-center pb-3 d-block d-md-flex text-center mb-2">
        <Media body className="ml-md-4">
        
        </Media>
      </Media>

      <h4 className="mb-1 text-center">Choose Groups</h4>
          <p className=" text-center fs-0">These groups will contain your contacts after import</p>

          <Select
              name="group"
              required=true
              className="mb-3"
              styles=customStyles
              components=animatedComponents
              innerRef=register(
                required: true
              )
              closeMenuOnSelect=true
              options=groups
              getOptionLabel=(title) => title
              getOptionValue=(_id) => _id
              onChange=(_id) => setUpload(...upload, group: _id)
              isMulti
              placeholder="select group"
              isSearchable=true
              errors=errors
            />
          <Button color="light" onClick=(() => setCreateGroupModal(true)) className="rounded-capsule shadow-none fs--1 ml- mb-0" >
                <FontAwesomeIcon icon="user-plus" />
                ` or create a new group`
              </Button>
                <Modal isOpen=createGroupModal centered toggle=() => setCreateGroupModal(!createGroupModal)>
                <ModalHeader toggle=toggle className="bg-light d-flex flex-between-center border-bottom-0" close=closeBtn>
                Let's give the group a name
                  </ModalHeader>
                    <ModalBody className="p-0">
                        <Card>
                            <CardBody className="fs--1 font-weight-normal p-4"> 
                              <Card>
                                <CardBody className="fs--1 font-weight-normal p-4"> 
                                  <Form onSubmit=handleSubmit>
                                    <Label for="title">Group Name:</Label>
                                      <Input value=newGroup.title.value onChange=handleChange className="mb-3" name="title" id="title"/>
                                      <Button block onClick=handleSubmit color="primary" className="mb-3">Save</Button>
                                    </Form>
                                    </CardBody>
                                  </Card> 
                                <Button block onClick=() => setCreateGroupModal(false)>close</Button>
                            </CardBody>
                        </Card>
                    </ModalBody>
                </Modal>
      

      <WizardInput
        type="textarea"
        label="or add number manually seperated by comma"
        placeholder="[phone], [phone], [phone]"
        name="manual-add"
        rows="4"
        id="manual-add"
        innerRef=register(
          required: false
        )
        errors=errors
      />
    </Fragment>
  );
;

export default StepOneForm;

【参考方案1】：

successCreate 是布尔值吗？

这可行：

useEffect(() => 
    if(!successCreate) return;

    toast(
      <Fragment>
        New Group Created
      </Fragment>
    );
  , [successCreate]);

useEffect 总是在依赖关系发生变化时被调用——在第一次渲染时它被保证被调用，因为之前没有任何东西——这相当于componentDidMount

useEffect(() => 
   console.log('mounted');
,[]);

【讨论】：

我现在看到了逻辑，我没想到在 useEffect 中有一个 if 语句......这打开了很多门哇！作为爱好，我一个人只编码了大约一年。谢谢你的解释。当它允许我现在去学习文档时，我将标记为答案。

successCreate 是一个布尔值吗？ AFAIK 无论successCreate 是什么类型，它仍然会在第一次渲染中调用...

嘿 decpk 我也这么认为，这个解决方案实际上对我有用。

@decpk - 当然会，但我只是想了解它是什么。如果它不是布尔值（-esque），那么 if 语句将无助于 OP。