Javascript 如何从react中的表单添加到列表中？

我目前正在学习React，我正在尝试制作一个简单的列表。用户可以单击“添加到列表”按钮，将出现一个模式窗口，其中包含一个表单，用户可以在其中输入一行文本。提交表单时，文本输入应显示在未排序的列表中。我似乎无法使文本输入显示在未排序列表中。我不确定我做错了什么。这是我的密码：

import React，{useState}来自“React”；
从“react bootstrap”导入{Modal，Button，Form}；
函数App（）{
const[newListItem，setNewListItem]=useState（“”）；
const[show，setShow]=useState（false）；
constchangeOpen=（）=>setShow（true）；
constchangeclose=（）=>setShow（false）；
var listItems=[]；
var addToList=（e）=>{
e、 预防默认值（）；
listItems.push（newListItem）；
console.log（newListItem）；
}
变量更新列表=（e）=>{
setNewListItem（如target.value）；
console.log（newListItem）；
e、 预防默认值（）；
}
返回(
简单列表
添加到列表中
这是标题
项目


添加到列表中

{listItems.map（项=>(
{item}
))}

);
}
导出默认应用程序更多没有错误的方法。请尝试此工作代码

使用直接状态变量one map函数显示列表
使用函数获取表单提交后的文本值
并使用将新阵列合并到旧阵列

function App() {
  const [newListItem, setNewListItem] = useState([]);
  const [show, setShow] = useState(false);
  const input = useRef();
  const changeOpen = () => setShow(true);
  const changeClose = () => setShow(false);

  var addToList = e => {
    e.preventDefault();
    setNewListItem([...newListItem, input.current.value]);
  };

  return (
    <div className="App">
      <h2>Simple List</h2>

      <Button onClick={changeOpen}>Add to the List</Button>

      <Modal show={show} onHide={changeClose}>
        <Modal.Header closeButton>
          <Modal.Title>This is the Title</Modal.Title>
        </Modal.Header>
        <form onSubmit={addToList}>
          <Modal.Body>
            <Form.Group>
              <Form.Label>Item</Form.Label>
              <br />
              <Form.Control type="text" ref={input} placeholder="Normal text" />
            </Form.Group>
          </Modal.Body>
          <Modal.Footer>
            <Button type="sumbit">Add to List</Button>
          </Modal.Footer>
        </form>
      </Modal>

      <ul>
        {newListItem.map((item, b) => (
          <li key={b}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

函数应用程序（）{
const[newListItem，setNewListItem]=useState（[]）；
const[show，setShow]=useState（false）；
const input=useRef（）；
constchangeOpen=（）=>setShow（true）；
constchangeclose=（）=>setShow（false）；
var addToList=e=>{
e、 预防默认值（）；
setNewListItem（[…newListItem，input.current.value]）；
};
返回(
简单列表
添加到列表中
这是标题
项目


添加到列表中

{newListItem.map（（项，b）=>(
{item}
))}

);
}
listItems
应该是您的状态参数，然后组件将在更新时重新呈现。此外，列表无序这一事实与此无关，IMO只是让问题变得混乱。您是否可以将listItems创建为状态变量，因为我认为更新后listItems数组再次初始化为空数组。感谢您的帮助和明确的方向。谢谢您的帮助。但有一个问题，为什么要在newListItem前面添加三个句点？我似乎找不到关于那件事的文件。这是电话