React 三元运算符用于遍历结果数组（否则未定义），是否有不同的首选方法？

Question

我是 React 的新手，我当前的代码可以正常工作，但是有没有更好的方法，"React way"（w/o 三元）映射空数组，然后再得到结果（没有返回未定义）？

我正在为从 API 搜索返回的每个结果渲染一张具体化卡片。代码的作用不是问题，因为它适用于我当前的解决方案。

提前致谢。

class NutritonixResultsDisplay extends Component {

render() {
    const hits = this.props.nutritionixResults.hits;
    return (
        <div className='nutritionixResultsDiv'>
            {hits
                ? hits.map((result, i) => (

                    <div key={i} className='nutritionixResultDiv'>
                        <Card className='cardDisplay' header={<CardTitle reveal  image='' waves='light'/>}
                            title={result.fields.item_name}reveal={<div><p>{`Calories: ${result.fields.nf_calories}`}</p><p>{`Protein: ${result.fields.nf_protein}`}</p></div>}> <p><a href="/">This is a link</a></p>
                            <p>{`Brand Name: ${result.fields.brand_name}`}</p>

                        </Card>
                    </div>

                ))
                : ''}
        </div>
    );
}
}
export default NutritonixResultsDisplay;

Answer 1

只需将 hits 设为一个空数组即可。

const hits = this.props.nutritionixResults.hits || [];

Answer 2

作为替代方法，您可以使用 || []:

(hits || []).map( // ... etc. )

React 三元运算符用于遍历结果数组（否则未定义），是否有不同的首选方法？

React ternary operator used to iterate through a results array (otherwise undefined), is there a different, preferred approach?

javascript

node.js

reactjs

create-react-app