反应，子组件的映射问题

Question

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

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

具有 state 的操作，例如（任务组件）：

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)之后有每个任务的操作列表。 问题是，为什么我不能像 map 这样的数组：

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

它什么都不渲染。

Answer 1

您需要map回调的return语句：

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

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

Answer 2

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

第一个代码示例中.map()方法的回调function，调用时返回Task组件。 所以tasks.map(...)返回的数组包含Tasks组件，这就是被渲染的内容。

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

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

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

或者使用return关键字

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

当您使用带有箭头 function 的大括号时，您需要使用return关键字显式返回一些内容。

第一个代码示例中的.map()有效，因为如果箭头 function 中没有大括号，则隐式返回箭头=>之后的表达式。

Answer 3

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

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