Reagieren: PropTypes in zustandslosen funktionalen Komponente

Question

In React habe ich eine zustandslose funktionale Komponente geschrieben und möchte jetzt Prop Typ Validierung hinzufügen.

List Komponente:

import React from 'react'; 
import PropTypes from 'prop-types'; 

function List(props) { 
    const todos = props.todos.map((todo, index) => (<li key={index}>{todo}</li>)); 
    return (<ul></ul>); 
} 

List.PropTypes = { 
    todos: PropTypes.array.isRequired, 
}; 

export default List; 

App Komponente, Rendering List:

import React from 'react'; 
import List from './List'; 

class App extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     todos: '', 
    }; 
    } 

    render() { 
    return (<List todos={this.state.todos} />); 
    } 
} 

export default App; 

Wie Sie in App sehen können, ich bin vorbei this.state.todos zu List. Da es sich bei this.state.todos um eine Zeichenfolge handelt, erwartete ich, dass die Überprüfung des Prop-Typs einsetzt. Stattdessen erhalte ich einen Fehler in der Browser-Konsole, da Strings keine Methode namens map haben.

Warum funktioniert die Prop-Typ-Validierung nicht wie erwartet? Taking ein Blick auf this question, scheint der Fall identisch.

Answer 1

sollten Sie

ändern

List.PropTypes = { 
    todos: PropTypes.array.isRequired, 
}; 

zu

List.propTypes = { 
    todos: PropTypes.array.isRequired, 
};