通过反应中的数据列表发送数据

Question

所以在过去的几个月中，我从0开始学习反应。尽管这是一个挑战，但我还是被鼓励继续前进。由于堆栈溢出，我已经多次被指示正确的方向，并再次寻求帮助。现在，我有一个使模型弹出的react组件。

在该弹出窗口中，我希望有一个可以提交和发布的可选列表。这个想法就像一个数据列表。我想在react中执行的操作，目前，我知道要在react中发送某些内容的唯一方法是使用axois库，但无法在模态模型中呈现任何内容。因此，我决定在模态主体中创建一个jsx数据列表。

这是正确的方法吗？有没有更简单的方法可以完成我要在模型中执行的操作？

const ModalExample = (props) => {
  const {
    className
  } = props;

  const [modal, setModal] = useState(false);
  const toggle = () => setModal(!modal);
  const externalCloseBtn = <button className="close" style={{ position: 'absolute', top: '15px', right: '15px' }} onClick={toggle}>&times;</button>;
  return (
    <div>
      <Button color="danger" onClick={toggle}>OTHER</Button>
      <Modal isOpen={modal} toggle={toggle} className={className} external={externalCloseBtn}>
        <ModalHeader>Add any soft skills that you believe you have</ModalHeader>
        <ModalBody>
          <form action="/amazonaws.com/updateSkill">
            <input list="other1" name="other2" />
            <datalist id="other1">
              </option><option value="excellent Communication ">
              </option><option value="Leadership experience">
              </option><option value="Ability to work under pressure">
              </option><option value="High work ethic">
              </option><option value="Organized">
              </option></datalist>
            <input type="submit" />
          </form>

        </ModalBody>
        <ModalFooter>
          {/* <Button color="primary" onClick={toggle}>Do Something</Button>{' '}*/}
          <Button color="secondary" onClick={toggle}>Cancel</Button>
        </ModalFooter>
      </Modal>
    </div>
  );
}

export default ModalExample;

提前谢谢您

Answer 1

据我所知，您想从API获取数据列表并将其显示在HTML部分中，因此将您的API响应添加到状态，并在return部分中使用它，以正确的HTML标签显示数据。

const ModalExample = (props) => {
  const {
    className
  } = props;
  const [modal, setModal] = useState(false);
  const [response, setResponse] = useState(false);

  const apiCall = () => {
    axios
    .get("http://")
    .then((response) => {
      setResponse(response);
    }).catch((error) => {
      console.err(error);
    });
  }

  useEffect(() => {
    apiCall();
  }, [value]);

  const toggle = () => setModal(!modal);
  const externalCloseBtn = <button className="close" style={{ position: 'absolute', top: '15px', right: '15px' }} onClick={toggle}>&times;</button>;
  return (
    <div>
      <Button color="danger" onClick={toggle}>OTHER</Button>
      <Modal isOpen={modal} toggle={toggle} className={className} external={externalCloseBtn}>
        <ModalHeader>Add any soft skills that you believe you have</ModalHeader>
        <ModalBody>
          <form action="/amazonaws.com/updateSkill">
            <input list="other1" name="other2" />
            <datalist id="other1">
              {response}
            </datalist>
            <input type="submit" />
          </form>

        </ModalBody>
        <ModalFooter>
          {/* <Button color="primary" onClick={toggle}>Do Something</Button>{' '}*/}
          <Button color="secondary" onClick={toggle}>Cancel</Button>
        </ModalFooter>
      </Modal>
    </div>
  );
}

export default ModalExample;