为什么 React 不显示来自组件的内容？ [复制]答案

【问题标题】：Why React doesn't display content from components? [duplicate]为什么 React 不显示来自组件的内容？ [复制]
【发布时间】：2021-05-24 07:15:51
【问题描述】：

我是 React 的新手，我正在尝试做一个非常简单的 Todo 应用程序，但我已经卡住了。我使用 create-react-app 进行了初始化，但当我遍历状态并调用向其传递数据的组件时，不知何故没有显示任何内容。

这里是 App.js：

import React, { useState } from 'react';
import Todo from './components/Todo';

function App() {
  const [title, setTitle] = useState(['test1', 'test2', 'test3'])

  return (
    <div className="App">
      {title.map(item => {
        <div>
          <Todo item={item} />
        </div>
      })}
    </div>
  );
}

export default App;

这是 Todo.js：

import React from 'react';

const Todo = ({item}) => {
  return <div>{item}</div>
}

export default Todo;

从正确的文件夹调用 Todo 组件（我检查了很多次），文件被保存并且 React 没有返回任何错误，它只是在 DOM 中不显示任何内容。如果我遍历标题并从 app.js 显示其内容，它会正常显示所有内容。此外，来自 Todo 组件内部的 console.log 没有被触发，这意味着该组件没有被导入。我在这里做错了什么？

【问题讨论】：

您不会从您的.map 电话中返回任何内容。您需要添加return，因为您使用的是箭头函数的块版本，而不是主体周围没有{} 的隐式返回版本。
是的，天哪。这样的新手错误。谢谢

标签： javascript reactjs

【解决方案1】：

它没有显示，因为你没有从map返回任何东西

试试下面的方法：-

使用return关键字从地图返回

      {title.map(item => {
        return (
          <div>
            <div>{item}</div>
          </div>
        )
      })}

或隐式返回以下行：-

      {title.map(item => (
        <div>
          <div>{item}</div>
        </div>
      ))}

【讨论】：

【解决方案2】：

试试这样的：

import React, { useState } from 'react';
import Todo from './components/Todo';

function App() {
  const [title, setTitle] = useState(['test1', 'test2', 'test3'])

  return (
    <div className="App">
      {title.map(item => {
       return(
        <div>
          <Todo item={item} />
        </div>
);
      })}
    </div>
  );
}

export default App;

或

 import React, { useState } from 'react';
import Todo from './components/Todo';

function App() {
  const [title, setTitle] = useState(['test1', 'test2', 'test3'])

  return (
    <div className="App">
      {title.map(item =>(
        <div>
          <Todo item={item} />
        </div>
      ))}
    </div>
  );
}

export default App;

【讨论】：