无法在返回区域中获取状态

Question

我有我在componentDidMount中设置的状态。 我可以在渲染中获取状态值，但是当我想进入返回区域时，状态值为空。 我的代码有什么问题吗？

这是我设置状态的方式：

    constructor(props) {
        super(props);
        this.state = {
            item: [],
            nama: '',
            kategori: '',
        }
    }
    loadAsesmen = () => {
        fetch("http://localhost/assessment-app/adminpg/api/v1/Proses_asesmen/do_asesmen/?id="+localStorage.getItem('idasesmen'), {
          method: 'POST',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
          },
        })
        .then(posts => {
            return posts.json();
        }).then(data => {
            let item = data.posts.map((itm) => {
                return(
                    <div key={itm.prosesasesmen_id}>
                        <h3>{itm.soal}</h3>
                        <br />
                        <RadioButtonGroup name="opsJawaban" defaultSelected="not_light">
                            <RadioButton value="1" label="Ya" style={styles.radioButton} /> 
                            <RadioButton value="0" label="Tidak" style={styles.radioButton} />
                        </RadioButtonGroup>
                    </div>
                )
            });
            this.setState({item: item, nama: data.posts[0].nama, kategori: data.posts[0].kategori});
            //localStorage.setItem('nama', data.posts[0].nama);
            //localStorage.setItem('kategori', data.posts[0].kategori);
            //console.log("State", this.state.item);
        });
    }
    componentDidMount() {
        this.loadAsesmen();
    }

这是我尝试获取状态的代码：

    render () {
        const settings = {
            dots: false,
            infinite: false,
            speed: 500,
            slidesToShow: 1,
            slidesToScroll: 1,
            swipeToSlide: false,
            swipe: false,
            nextArrow: <SampleNextArrow />,
            prevArrow: <SamplePrevArrow />
        };
        // const csrNama = localStorage.getItem('nama');
        // const csrKategori = localStorage.getItem('kategori');
        const query = new URLSearchParams(this.props.location.search);
        localStorage.setItem('idasesmen', query.get('id'));
        console.log(this.state.nama);
        return (
            <div>
            <Card>
                <CardText>
                    <TextField
                      disabled={true}
                      hintText="Nama"
                      defaultValue={this.state.nama}
                      floatingLabelText="Nama"
                    />
                    <br />
                    <TextField
                      disabled={true}
                      hintText="Kategori"
                      defaultValue={csrKategori}
                      floatingLabelText="Kategori"
                    />

控制台日志可以获取 this.state.nama 的值，但 TextField 对象不能。有什么我想念的吗？

截图

任何建议将不胜感激

Answer 1

 <TextField
    disabled={true}
    hintText="Nama"
    defaultValue={this.state.nama}
    floatingLabelText="Nama"
 />

因为您的状态以未定义的默认值开头，所以使用 '' 初始化。在默认值已经有一个值后更新它不会做任何事情，这就是为什么将其更新为值会起作用的原因。(这将使它成为受控输入，因此如果您计划允许用户编辑值，则需要添加 onChange(

如果您确实想要保留默认值，另一种方法是使其在完成异步函数加载之前不呈现 TextField。