無法讀取React Bootstrap Typeahead中未定義的屬性'paginationOption'

Question

在todos數組中，它查找id 4的元素。 他將其寫入owner變量。 我將owner變量放入newArray數組中。 然后，將newArray放入selected = {newArray.slice (0, 1)} 。 我想在輸入中將owner顯示為默認值。 我使用庫： React Bootstrap Typeahead 。

演示： https : //stackblitz.com/edit/react-agfvwn?file=index.js

我有錯誤：

無法讀取未定義的屬性“ paginationOption”

class App extends Component {
  constructor() {
    super();
    this.state = {
      todos: []
    };
  }

  componentDidMount() {
    this.getTodos();
  }

  getTodos = () => {
    axios({
      url: 'https://jsonplaceholder.typicode.com/todos',
      method: "GET"
    })
    .then(res => { 
      this.setState({
        todos: res.data
      });
    })
    .catch(error => {
      console.log(error);
    }) 
  }

  render() {
    console.log(this.state.todos)
    const owner = this.state.todos.find(todo => todo.id === 4)

    const newArray = [];
    newArray.push(owner)

    return (
      <div>
        <Typeahead
          id={'sasas'}
          selected={newArray.slice(0,1)}
          labelKey="title"
          options={this.state.todos}
          ref={(ref) => this._typeahead = ref}
        />
      </div>
    );
  }
}

Answer 1

由於getTodos尚未完成，並且this.state.todos為空數組， this.state.todos在初始渲染時undefined您的所有者。

提取數據后，應設置選定的項目，例如：

class App extends Component {
  constructor() {
    super();
    this.state = {
      todos: [],
      selected: []
    };
  }

  componentDidMount() {
    this.getTodos().then(() => {
      const todo = this.state.todos.find(todo => todo.id === 4);
      this.setState({
        selected: todo ? [todo] : []
      })
    })

  }

  getTodos = () => {
    return axios({
      url: 'https://jsonplaceholder.typicode.com/todos',
      method: "GET"
    })
    .then(res => { 
      this.setState({
        todos: res.data
      });
    })
    .catch(error => {
      console.log(error);
    }) 
  }

  render() {
    return (
      <div>
        <Typeahead
          id={'sasas'}
          selected={this.state.selected}
          labelKey="title"
          options={this.state.todos}
          ref={(ref) => this._typeahead = ref}
        />
      </div>
    );
  }
}