Question

我在渲染组件时遇到了问题，我有一个名为“任务”的组件，该组件由“应用”映射，例如：

{tasks.map((e, index) =>
    <Task key={e.id} title={e.title} description={e.description} id={e.id} status={e.status} remove={onRemoveTask}/>
    )}

具有类似（任务组件）的操作状态：

const [operations, setOperations] = useState([])
    useEffect(() => {
        async function apiCall() {
            try {
                const data = await getOperations(id);
                setOperations(data)
            } catch(err) {
                console.log(err)
            }
        }
        apiCall();
    }, [])

在 console.log（operations）之后，有每个任务的操作列表。问题是，为什么我不能像这样映射这个数组：

{operations.map((e, index) => {
    <Operation key={e.id} operation={e}/>
})}

它什么都不呈现。

Answer 1

您需要使用return语句进行map回调：

operations.map(e => {
    return <Operation key={e.id} operation={e}/>
})

// same
operations.map(e => <Operation key={e.id} operation={e}/>)

Answer 2

由.map()方法返回的数组包含由对回调函数的调用返回的值。

第一个代码示例中的.map()方法的回调函数被调用时，返回Task组件。因此，tasks.map(...)返回的数组包含Tasks组件，这就是要呈现的内容。

上一个代码示例中的.map()方法的回调函数不返回任何内容，这就是为什么不呈现任何内容的原因。

要使其正常工作，您需要省略大括号

{operations.map((e, index) => (
    <Operation key={e.id} operation={e}/>
))}

或使用return关键字

{operations.map((e, index) => {
    return <Operation key={e.id} operation={e}/>
})}

使用带有箭头功能的大括号时，需要使用return关键字显式返回某些内容。

第一个代码示例中的

.map()之所以起作用，是因为如果箭头功能中没有大括号，则会隐式返回箭头=>之后的表达式。

Answer 3

您需要在地图中指定return。您的代码将如下所示：

{operations.map((e, index) => {
 return (
    <Operation key={e.id} operation={e}/>
 )
    
})}

反应，由子组件进行映射的问题

3 个答案: