基于 React 函数的组件不会 return 嵌套映射函数中的组件

Question

我正在尝试根据输入类型输出不同的组件，但是进入 DOM 的组件或任何东西都没有呈现（又名 console.logs 正确触发以确认 if/if else statements are working correctly. 不太确定如何解决，因为我们不能将它移动到基于 class 的组件中，因为你不能在基于 class 的组件中使用反应挂钩，而我们目前使用 useStaticQuery 反应挂钩查询 WordPress。

    const ServiceQuestions = filter => {
    const { allWpService } = useServiceQuery()

    const renderQuestions = id => {
        allWpService.nodes.map(service => {
        if (service.id === id.filter) {
            service.serviceQuestions.questions.map(question => {
            question.questionInputField.map(inputField => {
                if (inputField.inputType === "text") {
                console.log(inputField.inputType)
                } else if (inputField.inputType === "number") {
                console.log(inputField.inputType)
                } else if (inputField.inputType === "radio") {
                return <InputCheckboxImageTop />
                } else {
                console.log("Cannot determine the inputType")
                }
            })
            })
        }
        })
    }

    return <>{renderQuestions(filter)}</>
    }

Answer 1

您的 renderQuestions 函数没有 return 结果数组

你可以替换

const renderQuestions = id => {
        allWpService.nodes.map(service => {

来自

const renderQuestions = id => {
        return allWpService.nodes.map(service => {

或者在 allWpService.nodes.map

周围使用圆括号而不是大括号

Answer 2

根据上面建议的评论，我删除了嵌套映射，而是使用了 forEach 循环，这很有用，所以为了将来参考这里是解决方案：

const ServiceQuestions = filter => {
    const { allWpService } = useServiceQuery()

    const renderQuestions = id => {
    allWpService.nodes.map(service => {
        if (service.id === id.filter) {
        service.serviceQuestions.questions.forEach(data => {
            data.questionInputField.forEach(field_data => {
            if (field_data.inputType === "text") {
                console.log(field_data.inputType)
            } else if (field_data.inputType === "number") {
                console.log(field_data.inputType)
            } else if (field_data.inputType === "radio") {
                return <InputCheckboxImageTop />
            } else {
                console.log("Cannot determine the inputType")
            }
            })
        })
        }
    })
    }

    return <>{renderQuestions(filter)}</>
}

基于 React 函数的组件不会 return 嵌套映射函数中的组件

React function based component wont return component inside nested map function

wordpress

reactjs

headless-cms