Javascript 如何在ReactJs中的复选框中显示一周中的天数

我试图在一个选择框中与其他人一起显示一周中来自JSON的日期。但是，它只显示来自JSON的当前日期，而不是一周中的其他日期。第一个mapschedule来自服务器，第二个mapschedule用于显示一周中的几天。我在末尾加了一张照片。我怎样才能解决它

    
    const options = [
      {
        label: "Mon",
        value: "Mon"
      }, {
        label: "Tue",
        value: "Tue"
      }, {
        label: "Wed",
        value: "Wed"
      }, {
        label: "Thu",
        value: "Thu"
      }, {
        label: "Fri",
        value: "Fri"
      }, {
        label: "Sat",
        value: "Sat"
      }
    ];

将sc.Day更改为option.label

{option.label} 将sc.Day更改为option.label

{option.label}

---

您实际上已经非常接近了，但是您需要将对象属性添加到select元素中。如果希望来自服务器的日期为选定值，可以将select元素上的值prop设置为该日期

功能应用程序{ const sc={Day:'Wed'}； 常量选项=[ { 标签：“周一”， 值：“Mon”， }, { 标签：‘星期二’， 值：'Tue'， }, { 标签：“Wed”， 值：“Wed”， }, { 标签：“Thu”， 值：“Thu”， }, { 标签：“Fri”， 值：“Fri”， }, { 标签：“Sat”， 值：“Sat”， }, ]; 回来 {options.mapoption=>{ 回来 {option.label} ; }} ; } ReactDOM.render，document.querySelector'root'

---

您实际上已经非常接近了，但是您需要将对象属性添加到select元素中。如果希望来自服务器的日期为选定值，可以将select元素上的值prop设置为该日期

功能应用程序{ const sc={Day:'Wed'}； 常量选项=[ { 标签：“周一”， 值：“Mon”， }, { 标签：‘星期二’， 值：'Tue'， }, { 标签：“Wed”， 值：“Wed”， }, { 标签：“Thu”， 值：“Thu”， }, { 标签：“Fri”， 值：“Fri”， }, { 标签：“Sat”， 值：“Sat”， }, ]; 回来 {options.mapoption=>{ 回来 {option.label} ; }} ; } ReactDOM.render，document.querySelector'root'

---

是的，但我的问题是将sc.Day保留为当前的一周。是否应选择该选项？我刚刚更新了我的答案。是的，它应该被选中。我的目标是：我从服务器上获取一周中的某一天，但如果我愿意，稍后我可以从选择选项中选择并修改这一天，我刚刚添加了一个片段。如果sc.Day为Wed，则默认为所选日期。您可以运行上面的代码段来检查它。是的，但我的问题是将sc.Day保留为当前的一周。是否应选择该选项？我刚刚更新了我的答案。是的，它应该被选中。我的目标是：我从服务器上获取一周中的某一天，但如果我愿意，稍后我可以从选择选项中选择并修改这一天，我刚刚添加了一个片段。如果sc.Day为Wed，则默认为所选日期。您可以运行上面的代码段来检查它。是的，就像它显示所有天一样。但我想保持来自服务器的当前日期不变。我想在一个选择框中显示sc.Day作为第一天是这样显示所有天。但我想保持来自服务器的当前日期不变。我想在选择框中将sc.日显示为初始日

<Col className="align-content-start date">
  <h5>
    <b>Days of Week</b>
    <div className="select-container">
      {e.schedules.map((sc, id) => {
        return (
          <>
            {' '}
            <select>
              {options.map(option => {
                return (
                  <>
                    {' '}
                    <option value={option}>{sc.Day}</option>{' '}
                  </>
                );
              })}
            </select>{' '}
            <h5> {sc.Hour} </h5>{' '}
          </>
        );
      })}
    </div>
  </h5>
</Col>