Reactjs 模态体内容未显示React，也没有控制台错误

我试图在一个模态中呈现一个表单，我正在处理一个按钮，该按钮将添加一个输入字段，然后表单的内容不再可见，我也没有控制台错误，所以我不知道我做错了什么。如有任何帮助，将不胜感激：

    import {Button, Col, Row, Modal} from 'react-bootstrap';
    import _ from "lodash";

    const DropdownVariableRow = ({
      variableValue,
      modalVariableValues,
      setModalVariableValues,
      id,
    }) => {
      const [value, setValue] = useState(variableValue);
      return (
        <Row key={id} className={"form-group"}>
          <SimpleFormText
            label={<Fragment>Value Name</Fragment>}
            value={value}
            onChange={(newValue) => setValue(newValue)}
            width={{ sm: 4 }}
            formGroupWrapper={false}
          />
          <div className="col-sm-1 text-right" style={{ paddingTop: 30 }}>
            <Button
              bsSize={Size.SMALL}
              bsStyle={State.DANGER}
              onClick={() => removeVariable(scriptVariable)}
            >
              <Icon icon={"fas fa-times"} />
            </Button>
            <Button
              onClick={() =>
                addVariable(value, modalVariableValues, setModalVariableValues)
              }
            >
              Add Value
            </Button>
          </div>
        </Row>
      );
    };
    
    const addVariable = (value, modalVariableValues, setModalVariableValues) => {
      setModalVariableValues(modalVariableValues.concat([value]));
    };

    export default function ScriptVariablesFields({
    model = 'script'
    }) {
const [modalVariableValues, setModalVariableValues] = useState([])
    <Modal show={show} onHide={handleClose}>
      <Modal.Header closeButton>
        <Modal.Title>EDIT DROPDOWN VALUES</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        {_.map(modalVariableValues, (variableValue) => {
          return (
            <DropdownVariableRow
              key={`DropdownVariable${variableValue}`}
              variableValue={variableValue}
              modalVariableValues={modalVariableValues}
              setModalVariableValues={setModalVariableValues}
              id={`DropdownVariableRow${variableValue}id`}
            />
          );
        })}
      </Modal.Body>
      <Modal.Footer>
        <Button onClick={handleSubmit}>Update Values</Button>
      </Modal.Footer>
    </Modal>
}

从'react bootstrap'导入{按钮、列、行、模式}；
从“洛达斯”进口；
常量DropdownVariableRow=({
可变值，
变量值，
SetModalVariableValue，
身份证件
}) => {
const[value，setValue]=useState（variableValue）；
返回(
设置值（新值）}
宽度={sm:4}
formGroupWrapper={false}
/>
removeVariable（scriptVariable）}
>
addVariable（值、modalVariableValues、setModalVariableValues）
}
>
增值
);
};
常量addVariable=（值、modalVariableValues、setModalVariableValues）=>{
setModalVariableValues（modalVariableValues.concat（[value]））；
};
导出默认函数ScriptVariablesFields({
模型='script'
}) {
常量[modalVariableValues，setModalVariableValues]=useState（[]）
编辑下拉列表值
{映射（modalvariableValue，（variableValue）=>{
返回(
);
})}
更新值
}

---

我对react还是个新手，所以任何能帮助调试的人都会帮上大忙。谢谢。

除非在发布时丢失了格式，否则ScriptVariablesFields函数将被破坏，并且不会返回任何JSX。如果这就是原因，很有趣，你没有得到任何错误。React元素必须始终返回JSX

应该是这样的：

export default function ScriptVariablesFields({model = 'script'}) {

   const [modalVariableValues, setModalVariableValues] = useState([]);

   return (
      <Modal show={show} onHide={handleClose}>
         <Modal.Header closeButton>
           <Modal.Title>EDIT DROPDOWN VALUES</Modal.Title>
         </Modal.Header>
         <Modal.Body>
            {_.map(modalVariableValues, (variableValue) => {
              return (
                <DropdownVariableRow
                  key={`DropdownVariable${variableValue}`}
                  variableValue={variableValue}
                  modalVariableValues={modalVariableValues}
                  setModalVariableValues={setModalVariableValues}
                  id={`DropdownVariableRow${variableValue}id`}
                />
              );
            })}
          </Modal.Body>
        <Modal.Footer>
          <Button onClick={handleSubmit}>Update Values</Button>
        </Modal.Footer>
     </Modal>
   )    
}

导出默认函数ScriptVariablesFields（{model='script'}）{
常量[modalVariableValues，setModalVariableValues]=useState（[]）；
返回(
编辑下拉列表值
{映射（modalvariableValue，（variableValue）=>{
返回(
);
})}
更新值
)    
}

除非在发布时丢失了格式，否则ScriptVariablesFields函数将被破坏，并且不会返回任何JSX。如果这就是原因，很有趣，你没有得到任何错误。React元素必须始终返回JSX

应该是这样的：

export default function ScriptVariablesFields({model = 'script'}) {

   const [modalVariableValues, setModalVariableValues] = useState([]);

   return (
      <Modal show={show} onHide={handleClose}>
         <Modal.Header closeButton>
           <Modal.Title>EDIT DROPDOWN VALUES</Modal.Title>
         </Modal.Header>
         <Modal.Body>
            {_.map(modalVariableValues, (variableValue) => {
              return (
                <DropdownVariableRow
                  key={`DropdownVariable${variableValue}`}
                  variableValue={variableValue}
                  modalVariableValues={modalVariableValues}
                  setModalVariableValues={setModalVariableValues}
                  id={`DropdownVariableRow${variableValue}id`}
                />
              );
            })}
          </Modal.Body>
        <Modal.Footer>
          <Button onClick={handleSubmit}>Update Values</Button>
        </Modal.Footer>
     </Modal>
   )    
}

导出默认函数ScriptVariablesFields（{model='script'}）{
常量[modalVariableValues，setModalVariableValues]=useState（[]）；
返回(
编辑下拉列表值
{映射（modalvariableValue，（variableValue）=>{
返回(
);
})}
更新值
)    
}

这些是否来自组件框架？

模态

、

按钮

和

行

来自何处？您的

模态

组件位于何处？还有你的

addVariable

函数？现在它们是无实体的代码片段，很难说这是如何组织的。请提供组件的完整代码片段。@zero298和Seth，我从

React

导入了

模态

，

按钮

和

行

，我已经更新了代码以显示这一点。你的模态体内到底有什么显示吗？如果您添加了一个测试而不是映射，它会显示吗？这些是来自组件框架吗？

模态

、

按钮

和

行

来自何处？您的

模态

组件位于何处？还有你的

addVariable

函数？现在它们是无实体的代码片段，很难说这是如何组织的。请提供组件的完整代码片段。@zero298和Seth，我从

React

导入了

模态

，

按钮

和

行

，我已经更新了代码以显示这一点。你的模态体内到底有什么显示吗？如果你添加一个测试而不是你的地图，它会显示吗？是的，我想我在发布时丢失了格式。当我在

Modal.Body

中删除映射并添加一个单词或其他东西时，它就会工作。我改变了一些事情以得到一个错误，比如改变变量名，我确实得到了一个错误。很高兴知道。现在我们隔离了错误。我以前从未使用过lodash，因此我必须了解一些有关它的知识才能帮助您。介意我们明天再做吗？是的，我想我在发帖的时候搞砸了。当我在

Modal.Body

中删除映射并添加一个单词或其他东西时，它就会工作。我改变了一些事情以得到一个错误，比如改变变量名，我确实得到了一个错误。很高兴知道。现在我们隔离了错误。我以前从未使用过lodash，因此我必须了解一些有关它的知识才能帮助您。介意我们明天做吗？