无法看到输出中的值

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>
            );
          })}

任何解释 and/or 修复？具体这里怎么用React.useEffect()?

Answer 1

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

首先，forEach 不是那样工作的，所以你不能从它return。

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

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>
            );
          })}

仅仅一张地图不会在内部循环中完成工作，因为你会遇到不满足你的条件的情况。

无法看到输出中的值

Unable to see the value in output

reactjs

react-functional-component