Невозможно увидеть значение в выводе

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

Просто карта не будет выполнять работу во внутренней l oop, потому что у вас будут случаи, когда ваши условия не будут выполнены.