时间戳

首页 > 解决方案 > React JS - 显示 json 数组中的值的正确方法

reactjs - React JS - 显示 json 数组中的值的正确方法

问题描述

我需要获取并显示表单文本框中的值。我需要检查该值是否存在且不等于 null 然后在文本框中显示值，否则显示空白字段。

现有的代码实现显示如下：

 {
this.state.testJson.Names ? this.state.testJson.Names.length > 0 ? this.state.testJson.Names.map(response =>
<div className="form-group col-md-3" key={response.nameId}>
    <label htmlFor="firstName">{Liferay.Language.get('first-name')}</label>
    <input name="firstName" value={response.otherName} type="text" className="form-control" id="firstName" />
</div>
):
<div className="form-group col-md-3">
    <label htmlFor="firstName">{Liferay.Language.get('first-name')}</label>
    <input name="firstName" value='' type="text" className="form-control" id="firstName" />
</div> :
<div className="form-group col-md-3">
    <label htmlFor="firstName">{Liferay.Language.get('first-name')}</label>
    <input name="firstName" value='' type="text" className="form-control" id="firstName" />
</div>
}

我不知何故觉得这不是实现它的最佳方式，因为我需要避免代码重复。有人能告诉我实现这一目标的更好方法是什么吗？

谢谢

标签： reactjsreact-nativereact-hooks

解决方案

你可以在一些卡片里面取

<div className="row">
      {!names
        ? "Loading..."
        : names.map((name) => {
            return (
              <div className="col">
                  <div className="card-body">
                    <h5 className="card-title">{name.firstname}</h5>
                  </div>
                </div>
              </div>
            );
          })}
    </div>

推荐阅读