Question

所以我有这段代码：

class LatestRecipes extends Component
{
  render()
  {
     return(
      <div>
        <ul>
        {
          Object.entries(this.props.latestRecipes).forEach(([key, recipe]) => 
            <li key={key}>
              <div key={key}>
                <Link to={{pathname: '/recipe/' + recipe.Name, state: { recipe: recipe, key: key }}}>{recipe.Name}</Link>    
              </div>
            </li>
        )}
        </ul>
      </div>
    );
   }
}

但是我的React App没有渲染任何 li 元素。

这是我现在的this.props.latestRecipes：

-LOyADRLntFBWyj1TtGx: {Description: "Description", Ingredients: Array(1), Name: "Name"}
-LOyBKQJcAsR0YfHAjrZ: {Description: "Description", Ingredients: Array(1), Name: "Name"}

我想要的是能够将key（-LOyADRLntFBWyj1TtGx）和recipe发送到配方组件。并在li元素

中呈现“食谱”详细信息

没有错误，什么也没有，如果我对其进行控制台记录，我会得到我想要的确切结果。

Answer 1

您需要一个map而不是forEach。

Array.forEach函数不会返回元素数组（它会根据MDN docs返回undefined），因为map将根据数组中的元素被映射。

例如：

const timesTwo = [1, 2, 3].map(e => e * 2);
console.log(timesTwo); // output: [2, 4, 6]

对于forEach来说，这是无效的。您将必须这样做：

const timesTwo = [];
[1, 2, 3].forEach(e => {
  timesTwo.push(e * 2);
});
console.log(timesTwo); // output: [2, 4, 6]

反应对象条目什么都不渲染

1 个答案: