setState之后，反应不会更新组件

Question

我在更新React中的组件时遇到问题。我的Autocomplete组件具有链接到defaultValue的this.state.tags属性。在执行render()方法时，尚未提取this.state.tags数组，因此在组件中将其设置为空。将this.state.tags数组设置为其获取的值时，React不会更新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设置正确。

Answer 1

您正在使用options={this.state.all_tags}，并且正在componentDidMount中更新状态中的tags字段。我认为有问题。

Answer 2

首先，您需要使用this.state.tags作为自动完成中的选项。

第二次使用setState似乎有问题。

最后，如果需要填充渲染中的所有标签，则需要使用value组件的Autocomplete属性。

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: [],
      all_tags: [{ tag: "init" }]
    };
  }

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

  render() {
    return (
      <Fragment>
        <Autocomplete
          multiple
          value={this.state.tags}
          onChange={(event, value) => console.log(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;

使用伪造的api处理Codesandbox示例。