javascript - ReactJS：在表单内的选择中显示列表

Question

我试图在表单中显示一个列表，但我不明白为什么它没有显示。

useEffect(() => {
    props.getRealms(); // I make call to api
    localStorage.setItem('realm', JSON.stringify(realm));
  }, [realm]);

  const { realmsList, loadingRealms } = props;
  console.log('realmsList.length ', realmsList.length);

  return (
    <div>
      <AvForm model={{}} onSubmit={saveEntity}>
        {realmsList.length > 0 ? (
          <div>
            <AvGroup>
              <Label>Realm</Label>
              <AvInput id="personaInfo-realm" data-cy="realm" type="select" name="realm">
                <option value="" key="0">
                  Choose Realm
                </option>
                {realmsList.map(entity => {
                  console.log('entity ', entity),
                    (
                      <option key={entity.id} value={entity.id}>
                        {entity.name}
                      </option>
                    );
                })}
              </AvInput>
            </AvGroup>
            <Button color="primary" id="save-entity" data-cy="entityCreateSaveButton" type="submit" style={{ marginLeft: 10 }}>
              <FontAwesomeIcon icon="save" /> Save
            </Button>
          </div>
        ) : (
          <div className="d-flex justify-content-center">
            <div className="spinner-border text-primary" role="status">
              <span className="visually-hidden"></span>
            </div>
          </div>
        )}
      </AvForm>
    </div>
  );
};

const mapStateToProps = ({ sceRealm }: IRootState) => (
  {
    realmsList: sceRealm.entities,
    loadingRealms: sceRealm.loading,
  }
);

const mapDispatchToProps = {
  getRealms,
};

type StateProps = ReturnType<typeof mapStateToProps>;
type DispatchProps = typeof mapDispatchToProps;

export default connect(mapStateToProps, mapDispatchToProps)(ScePersonaInfoUpdate);

在我的回报中，我写了这个条件：realmsList.length > 0，但我唯一能看到的是写“选择领域”而不是领域列表。地图内的控制台日志，显示列表的实体。

我该如何解决？

谢谢

标签： javascriptreactjstypescript

Answer 1

您的地图内没有返回，因此您的地图实际上没有发生任何事情

{realmsList.map(entity => {
    console.log('entity ', entity),
     return (
         <option key={entity.id} value={entity.id}>
            {entity.name}
         </option>
    );
 })}