React 无法读取未定义的属性“长度”，但数组已定义

Question

我正在从我的 react 类组件中的 API 请求数据。在我的 fetchData 方法中，我将状态设置为一个名为 data 的键，该键最初只是一个空对象。使用 fetchData 方法，该对象将填充来自 API 的数据结果。我将结果传播到数据对象中，并在对象内添加一个“directors”键，该键是由于过滤方法而创建的数组。我的问题是我需要导向器数组的长度，但是 this.state.data.directors.length 导致错误说它是未定义的。但是，this.state.data.directors 成功地将数组返回给我，当我打开数组时，我可以在控制台中看到长度属性是我实际需要的数字。这是我的代码的一个版本。

constructor(){
        super();
        this.state={
            data: {},
        };
    }

    fetchData = async movieId => {

        try{
            const endpoint = `${API_URL}movie/${movieId}?api_key=${API_KEY}`;
            const result = await(await fetch(endpoint)).json();
            const creditsEndpoint = `${API_URL}movie/${movieId}/credits?api_key=${API_KEY}`;
            const creditsResult = await (await fetch(creditsEndpoint)).json();
            const directors = creditsResult.crew.filter(member => member.job === 'Director');

            this.setState({
                data: {
                    ...result,
                    actors: creditsResult.cast,
                    directors
                }
            }, () => {
                localStorage.setItem(`${movieId}`, JSON.stringify(this.state.data));
            });

        }catch(error){
            this.setState({error: true});
            alert(error);
        }
        this.setState({loading: false});
    }

    componentDidMount(){
        const {movieId} = this.props.match.params;

        if(localStorage.getItem(`${movieId}`)){
            console.log("grabbing from localStorage" + " " + movieId);
            this.setState({
                data: JSON.parse(localStorage.getItem(`${movieId}`))
            });
        } else {
            console.log("Grabbing from API");
            const {movieId} = this.props.match.params;
            this.setState({loading: true});
            this.fetchData(movieId);
        }
    }

    render(){
        const {data} = this.state;
        console.log(this.state.data.directors.length);
        return(

我希望从 director 数组中获取 length 属性，因为 console.logging director 数组会返回一个包含对象的数组。

Answer 1

您没有定义 director 数组的初始状态。因此，在解决 API 请求之前，directors 是未定义的

this.state = {
  data: {
    directors: []
  }
}