如何在 React 中将 props 分配给 state

有一个父组件 List.js，在其中的 componentDidMount 挂钩上，我获得了我将在此组件中使用的类别以及我想在子 AddPostForm.js 中使用的类别。在AddPostForm组件中，我在状态中有一个title，body是两个input，category指的是select标签，当在这个select中选择了一个选项，就赋值给了category。问题是在初始化AddPostForm组件时，我需要在category中设置默认值（取this.props.categories[0].name中的第一个元素）。如何正确地做到这一点？

AddPostForm.js

import React from 'react';
import postApi from '../../services/postApi';

class AddPostForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            title: '',
            body: '',
            category: ''
        };
    }

    handleInputChange = event => {
        const name = event.target.name;
        const value = event.target.value;

        this.setState({
            [name]: value
        });
    };

    formSubmit = async event => {
        event.preventDefault();
        const { status, data } = await postApi.addPost({
            title: this.state.title,
            body: this.state.body,
            category: this.state.category,
        });

        if (status === 200) {
            this.setState({
                title: '',
                body: '',
                category: this.props.categories[0].name
            });

            this.props.addPost(data);
        }
    };

    render() {
        return (
            <form onSubmit={this.formSubmit} className="mb-3">
                <div className="form-group">
                    <input type="text" name="title" className="form-control" value={this.state.title} onChange={this.handleInputChange} />
                </div>
                <div className="form-group">
                    <textarea name="body" className="form-control" value={this.state.body} onChange={this.handleInputChange} />
                </div>
                <div className="form-group">
                    <select className="form-control" name="category" value={this.state.category} onChange={this.handleInputChange}>
                        {this.props.categories.map(item => (
                            <option key={item._id}>{item.name}</option>
                        ))}
                    </select>
                </div>
                <button className="btn btn-primary">Add</button>
            </form>
        );
    }
}

export default AddPostForm;

List.js

import React from 'react';
import categoryApi from '../../services/categoryApi';
import AddPostForm from './AddPostForm';

class List extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            posts: [],
            categories: [],
        };
    }

    componentDidMount() {
        categoryApi.getCategories().then(response => {
            if (response.data.length) {
                this.setState({
                    categories: response.data
                });
            }
        });
    }

    addPost = async post => {
        this.setState(prevState => ({
            posts: [...prevState.posts, post],
        }));
    };

    render() {
        return (
            <div className="shadow p-3 mt-4">
                <AddPostForm categories={this.state.categories} addPost={this.addPost} />
            </div>
        );
    }
}

export default List;