Почему PropTypes выдает ошибку во внутренней функции функционального компонента?

Question

Я определил функциональный компонент без сохранения состояния следующим образом:

// a is a list of object, each having 'title' & 'subtitle' property
export const SampleComponent = ({a}) => {
    const internalFunction = ({ title, subtitle}) => {
        // return a jsx based on title and subtitle
        return;
    };
    return a && a.length && <div className='sampleComponent'>
        { a.map(item => internalFunction(item) }
    </div>
};

SampleComponent.propTypes = {
    a: PropTypes.object
};

Но когда я запускаю eslint для файла, он выдает мне такую ​​ошибку:

error  'title' is missing in props validation     react/prop-types
error  'subtitle' is missing in props validation  react/prop-types

Номер строки эта точка ошибки, где я определил internalFunction. Но я не могу понять, почему я получаю эту ошибку, потому что title & subtitle не являются частью props моего SampleComponent.

Answer 1

Поскольку вы передаете массив в подпорки, правильный способ записи propType будет

SampleComponent.propTypes = {
    a: PropTypes.arrayOf(PropTypes.shape({
        title: PropTypes.string,
        subtitle: PropTypes.string
      }))
};

Это должно устранить ошибки eslint.

Answer 2

Попробуйте добавить проптипы и к внутреннему компоненту.

const internalFunction = ({ title, subtitle}) => {
    // return a jsx based on title and subtitle
    return;
};
internalFunction.propTypes = {
   title: PropTypes.string,
   subtitle: PropTypes.string
};
return a && a.length && <div className='sampleComponent'>
    { a.map(item => internalFunction(item) }
</div>