Tengo un problema con la actualización del componente en React. Mi componente Autocomplete tiene su propiedad this.state.tags que está vinculada a this.state.tags . En el momento de ejecutar el método render() , la matriz this.state.tags aún no se recupera, por lo que se establece vacía en el componente. Cuando this.state.tags array se establece en su valor recuperado, el Autocomplete no se actualiza con React.

 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={amp}gt;{ var arr = []; res.data.tags.forEach(x={amp}gt;{ arr.push({tag: x}); }); this.setState((state,props)={amp}gt;{return {tags: arr}}); }) .catch((e)={amp}gt;{console.log(e)}); } 
 render() { return ( {amp}lt;Fragment{amp}gt; {amp}lt;Autocomplete multiple defaultValue={this.state.tags[0]} onChange={(event, value) ={amp}gt; console.log(value)} id="tags-standard" options={this.state.all_tags} getOptionLabel={option ={amp}gt; option.tag} renderInput={params ={amp}gt; ( {amp}lt;TextField {...params} variant="standard" label="Multiple values" placeholder="Favorites" fullWidth /{amp}gt; )} /{amp}gt; {amp}lt;/Fragment{amp}gt; ); } 

Editar: si pongo esto dentro de render() :

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

this.state.tags está configurado correctamente.

Primero, debe usar this.state.tags como opciones en Autocompletar.

En segundo lugar, su uso de setState parece problemático.

Y, por último, si necesita llenar todas las etiquetas en el renderizado, debe usar la propiedad de value del componente Autocompletar .

 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 ={amp}gt; { let allTags = res.data.tags.map(el ={amp}gt; ({ tag: el })); this.setState({ tags: allTags, selectedTags: allTags }); }) .catch(e ={amp}gt; { console.log(e); }); } onChange = value ={amp}gt; { this.setState({ selectedTags: value }) } render() { return ( {amp}lt;Fragment{amp}gt; {amp}lt;Autocomplete multiple value={this.state.selectedTags} onChange={(event, value) ={amp}gt; this.onChange(value)} id="tags-standard" options={this.state.tags} getOptionLabel={option ={amp}gt; option.tag} renderInput={params ={amp}gt; ( {amp}lt;TextField {...params} variant="standard" label="Multiple values" placeholder="Favorites" fullWidth /{amp}gt; )} /{amp}gt; {amp}lt;/Fragment{amp}gt; ); } } export default App; 

Códigos de trabajo y muestra de caja con una API falsa.

Está utilizando options={this.state.all_tags} y en el componentDidMount está actualizando el campo de tags en el estado. Creo que existe el problema.