React Native：功能组件中的getter函数？

Question

I am new to React/React Native and having problems returning the value of a function into my template. My Component, which is a functional component, receives a prop called item . I retrieve a value from that item after a simple calculation, but I'm getting different errors for each way I try to return the value in the template.

Last I tried is:

getMaxPercent() 
{
  let max = _.maxBy(props.item.discounts, function(discount) {
    return discount.sale;
  });
  return max;
}

In template like this:

<Text style={{ fontSize:17, color:'white', fontWeight:'bold' }}>
  { getMaxPercent() }% Off
</Text>

I also tried:

const getMaxPercent = () => {}

Coming from a vue background react just seems so... verbose. Is there a react equivalent to computed properties?

Answer 1

Try this,

function getMaxPercent() 
    {
        let max = _.maxBy(props.item.discounts, function(discount) {
            return discount.sale;
        });
        return max.sale;
    }

reference - https://www.geeksforgeeks.org/lodash-_-maxby-method/

Answer 2

Is there a react equivalent to computed properties?

The React equivalent to computed properties is just standard variables, declared in the body of the component function. The function runs every time props are changed, so these will be re-calculated then.

You don't need the additional function at all — you can just directly assign max to a variable.

const Component = (props) => {
  const max = _.maxBy(props.item.discounts, function(discount) {
    return discount.sale;
  });

  return (
    <Text style={{ fontSize:17, color:'white', fontWeight:'bold' }}>
      { max }% Off
    </Text>
  );
};

Answer 3

If you don't want the dependency on lodash you can roll your own simple max finder to return the maximum sale property.

const getMaxPercent = (discounts) =>
  Math.max(...discounts.map(({ sale }) => sale));

 const getMaxPercent = (discounts) => Math.max(...discounts.map(({ sale }) => sale)); const discounts = [ { id: 0, sale: 3.5 }, { id: 1, sale: 13.5 }, { id: 2, sale: 13 }, { id: 3, sale: 10 }, { id: 4, sale: 7.8 } ]; console.log(getMaxPercent(discounts));