无法在 React Hooks 中显示输出答案

【问题标题】：Unable to display output in React Hooks无法在 React Hooks 中显示输出
【发布时间】：2019-11-17 06:09:39
【问题描述】：

我有一个项目列表，单击按钮时它应该显示有关该特定项目的更多信息。为此，我创建了一个钩子，它从 API 中获取所有项目的列表，并在它在 <ul> 标记内迭代时显示该列表。（这是在返回标签内。）在每次迭代中，它都会显示一个名为“详细信息”的按钮

<button onClick ={moreInfo.bind(this, post)} >Details</button>

当点击它时，它会将关于该对象的信息从列表发送到以下代码 -

const moreInfo = (index) => {

         console.log(index.name) //works

          return (  <div> 
                {index.map = ( x => (
                    <div>{x.name}</div>
                    ))} 
             </div>) //no output
       }

console.log 正在显示名称，但此处没有通过返回标记显示任何内容

【问题讨论】：

moreInfo 不是一个钩子，它是一个点击事件处理程序。由于您的组件永远不会从您的点击处理程序返回返回值，因此它永远不会显示。此外，您正在打印index 对象的name 属性，并且在下一行中，您尝试像数组一样迭代对象。这里有很多问题......
嗨 Tobias 我提到我创建了一个钩子并从 API 获取数据。此代码未包含在上面。上面的代码仅适用于按钮以及传递给事件处理程序的数据。
哦，我的错，我读得很快！ :) 尽管有钩子，但我写的内容仍然适用。
Index 是一个具有 name、id、type 值的对象。我现在试图只输出名称
是的，map 用于将数组中的值映射到不同的值。由于您正在处理一个不起作用的对象。如果您只想返回名称，请将其更改为：return <div>{index.name}</div>;。但是，由于您从单击处理程序返回 JSX，因此它仍然无法正常工作。

标签： reactjs react-hooks

【解决方案1】：

您没有映射数组，您只是将map 属性分配给index 变量尝试这样做，如下所示：

const MoreInfo = (index) => {
    return (  
        <div> 
            {index.map(x => <div>{x.name}</div>)} 
        </div>
    ) 
}

【讨论】：

没错，但仍然无法正确呈现，因为 JSX 是从点击处理程序返回的。