函数式组件 returns object Object in react

Question

我想输出 json 对象的值。每次提取时，值的类型都会从字符串更改为空值。这就是为什么我有 for 循环和 if 语句。循环内的每个常量都输出正确的值，但在将其添加到 listItems 之后，每个 <li> 只是 returns [object Object]。我尝试使用 <li>${value} (${time})</li> 但这会将标签 <li> 输出为字符串值。

function ValuesList(props) {
  
    let listItems = '';
    for(let i=1; i<=15; i+=1){
        const value = props.myDrink[`strValue` + i]; *//json code is: strValue1, strValue2, ... strValue15, with some of null value.*
        const time = props.myDrink[`strTime` + i];
        if (typeof value === 'string'){
            listItems += <li>{value} ({time})</li>
        }
    }
   
    return (<ul>{listItems}</ul>)
};

我之前在 jQuery 中做过这个，但我需要让它在 React 中工作。我应该更改 += 吗？如果不是，我应该修哪条线？这是我的第一个反应项目的一部分。请帮忙，谢谢:)

Answer 1

您应该直接映射您的项目。 jQuery.

中的操作无需重复

如果你的饮料道具是一个数组

return (
 <ul>
  {props.drinks(map(({value, time}, i)=>{
    if (typeof value === 'string'){
     return <li key={`item-${i}`}>{value} ({time})</li>
    }
  })
 </ul>
)

如果你的饮料道具是一个物体

return (
 <ul>
  {Object.entires(props.drinks).map(({ value, time }, i) => {
    if (typeof value === "string") {
     return <li key={`item-${i}`}>{value} ({time})</li>;
    }
   })}
 </ul>
)

Answer 2

与其将 JSX 值连接成一个空字符串，不如将它们推入一个数组（具有键属性）：

let listItems = [];
 for(let i=1; i<=15; i+=1){
        const value = props.myDrink[`strValue` + i]; 
        const time = props.myDrink[`strTime` + i];
        if (typeof value === 'string'){
            listItems.push(<li key={/* some unique key. Probably your value */}>{value} ({time})</li>);
        }
    }

函数式组件 returns object Object in react

Functional component returns object Object in react

list

reactjs

react-functional-component