मुझे प्रतिक्रिया में घटक अद्यतन करने में समस्या है। मेरे Autocomplete घटक की defaultValue संपत्ति है जो this.state.tags से जुड़ी है। render() विधि को क्रियान्वित करने के समय this.state.tags सरणी अभी तक प्राप्त नहीं हुई है, इसलिए यह घटक में खाली सेट है। जब this.state.tags सरणी को उसके प्राप्त मूल्य पर सेट किया जाता है तो Autocomplete प्रतिक्रिया द्वारा अपडेट नहीं किया जाता है।

constructor(props) {
  super(props);
  this.state = {
    tags:[],
    all_tags:[{tag: "init"}]
  };
}
componentDidMount() {

axios.post('http://localhost:1234/api/issue/getIssueById', {id: this.props.match.params.id}, { withCredentials: true })
  .then(res=>{
  var arr = [];
  res.data.tags.forEach(x=>{
      arr.push({tag: x});
  });
  this.setState((state,props)=>{return {tags: arr}});
})
.catch((e)=>{console.log(e)});
}
render() {

return (
  <Fragment>
      <Autocomplete
             multiple
             defaultValue={this.state.tags[0]}
             onChange={(event, value) => console.log(value)}
             id="tags-standard"
             options={this.state.all_tags}
             getOptionLabel={option => option.tag}
             renderInput={params => (
               <TextField
                 {...params}
                 variant="standard"
                 label="Multiple values"
                 placeholder="Favorites"
                 fullWidth
               />
             )}
           />
      </Fragment>
    );
}

संपादित करें: अगर मैं इसे render() के अंदर रखूं:

    setTimeout(()=>{
      console.log("this.state.tags: ", this.state.tags);
    }, 1000);

this.state.tags सही ढंग से सेट है।

0
Kristopher 22 पद 2019, 20:01

2 जवाब

सबसे बढ़िया उत्तर

सबसे पहले, आपको स्वतः पूर्ण में विकल्प के रूप में this.state.tags का उपयोग करना होगा।

दूसरा सेटस्टेट का आपका उपयोग समस्याग्रस्त लगता है।

और अंत में, यदि आपको रेंडर में सभी टैग्स को पॉप्युलेट करने की आवश्यकता है, तो आपको स्वतः पूर्ण घटक।

import React, { Fragment, Component } from "react";
import { fetchTags } from "./fakeApi";
import Autocomplete from "@material-ui/lab/Autocomplete";
import TextField from "@material-ui/core/TextField";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tags: [],
      selectedTags: [],
      all_tags: [{ tag: "init" }]
    };
  }

  componentDidMount() {
    fetchTags()
      .then(res => {
       let allTags = res.data.tags.map(el => ({ tag: el }));
        this.setState({
          tags: allTags,
          selectedTags: allTags
        });
      })
      .catch(e => {
        console.log(e);
      });
  }
  onChange = value => {
      this.setState({
        selectedTags: value
      })
  }

  render() {
    return (
      <Fragment>
        <Autocomplete
          multiple
          value={this.state.selectedTags}
          onChange={(event, value) => this.onChange(value)}
          id="tags-standard"
          options={this.state.tags}
          getOptionLabel={option => option.tag}
          renderInput={params => (
            <TextField
              {...params}
              variant="standard"
              label="Multiple values"
              placeholder="Favorites"
              fullWidth
            />
          )}
        />
      </Fragment>
    );
  }
}

export default App;

एक नकली एपीआई के साथ Codesandbox नमूना काम कर रहा है।

0
SuleymanSah 22 पद 2019, 19:18

आप options={this.state.all_tags} का उपयोग कर रहे हैं और componentDidMount में आप राज्य में tags फ़ील्ड को अपडेट कर रहे हैं। मुझे लगता है कि मुद्दा है।

2
Mateusz Krzyżanowski 22 पद 2019, 17:14