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对象不能。有什么我想念的吗？

Screenshot

任何建议都将受到赞赏

Answer 1

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

因为您的状态以未定义的 defaultValue 开头，因此会使用''进行初始化。在已经有值的情况下更新defaultValue将无法执行任何操作，因此将此更新为值将起作用。（这将使其成为受控输入，因此如果您计划允许用户编辑该值，则需要添加onChange）

另一种方法是，如果你想保持defaultValue，则在完成加载你的异步函数之前，不要渲染 TextField

无法在返回区域获得状态

1 个答案: