reactjs - 在输出中看不到值

Question

我一直试图弄清楚为什么这在输出中不可见，很可能与反应的异步性质有关，这很好。但是需要做什么才能显示内容呢？

描述栏是空白的！

https://codesandbox.io/embed/vibrant-field-700k2?fontsize=14&hidenavigation=1&theme=dark

有一个带有主数据的用户表：

{usrData.map((prop, key) => {
            return (
              <tr key={key}>
                <td className="text-center">{prop.id}</td>
{/* Returns Data */}
                <td className="text-left">
                  {
                    selectTimeOptions.filter(
                      dealer => dealer.value === prop.time_slot
                    )[0].label
                  }
                </td>
                {/* To double check data is present */}
                <td>{prop.customergarage}</td>
                <td>
                  {/* Does not return or show data */}
                  {/* But data visible in console */}
                  {[...prop.customergarage].forEach(d => {
                    if (parseInt(d, 10) > 0) {
                      const retrs = sTypes.filter(st => st.value === d)[0];
                      console.log(retrs);
                      return retrs;
                    }
                  })}
                </td>
                <td className="text-right" />
              </tr>
            );
          })}

任何解释和/或修复？特别是如何在这里使用 React.useEffect() ？

Answer 1

我不知道你想在这里用 useEffect 做什么，但我会尝试解释为什么它不渲染。

首先， forEach 不能那样工作，所以你不能从它返回。

其次，您可以使用构建内部部件的功能解决所有问题。

buildCustomerData = (customergarage) => {
const good = [];
customergarage.forEach(d => {
                    if (parseInt(d, 10) > 0) {
                      const retrs = sTypes.filter(st => st.value === d)[0];
                      console.log(retrs);
                      good.push(retrs)
                    }
                  })
  return good;
}

{usrData.map((prop, key) => {
            return (
              <tr key={key}>
                <td className="text-center">{prop.id}</td>
{/* Returns Data */}
                <td className="text-left">
                  {
                    selectTimeOptions.filter(
                      dealer => dealer.value === prop.time_slot
                    )[0].label
                  }
                </td>
                {/* To double check data is present */}
                <td>{prop.customergarage}</td>
                <td>
                  {/* Does not return or show data */}
                  {/* But data visible in console */}
                  {buildCustomerData(prop.customergarage)}
                </td>
                <td className="text-right" />
              </tr>
            );
          })}

只是一张地图不会在内部循环中完成工作，因为您将遇到无法满足您的条件的情况。