reactjs - API 调用后在 React 中更新状态时遇到问题

问题描述

我正在尝试创建一个具有自动完成功能的文本框，该功能从 API 中提取建议，但在从 API 接收到数组后无法更新状态。我正在从这里修改代码：https ://blog.bitsrc.io/building-a-react-autocomplete-component-from-scratch-b78105324f4c

我想我必须使用 ComponentDidMount() 但我不确定如何将它应用于 onChange 函数。

      class App extends React.Component {
        render() {
          return (
            <div className="App">
                <Autocomplete/>
           </div>
         );
        }
      }

      class Autocomplete extends React.Component{
        state = {
          activeOption: 0,
          filteredOptions: [],
          showOptions: false,
          userInput: ''
        };

        onChange = (e) => {
          const userInput = e.currentTarget.value;

          fetch("/places", {
              method: 'POST',
              headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
              },
              body: JSON.stringify(userInput)
            }).
            then(response => response.json())
            .then(data => data.filter(element =>
              element.PlaceName.toLowerCase().indexOf(userInput.toLowerCase()) > -1))
            .then(filteredOptions => this.setState(
            {
            activeOption: 0,
            filteredOptions: filteredOptions,
            showOptions: true,
            userInput: e.currentTarget.value
          }));
        };
.
.
.
.
  render() {
       const {
         onChange,
         onClick,
         onKeyDown,

         state: { activeOption, filteredOptions, showOptions, userInput }
       } = this;
       let optionList;
       if (showOptions && userInput) {
         console.log(filteredOptions)
         if (filteredOptions.length) {
           optionList = (
             <ul className="options">
               {filteredOptions.map((optionName, index) => {
                 let className;
                 if (index === activeOption) {
                   className = 'option-active';
                 }
                 return (
                   <li className={className} key={optionName} onClick={onClick}>
                     {optionName}
                   </li>
                 );
               })}
             </ul>
           );
         } else {
           optionList = (
             <div className="no-options">
               <em>No Option!</em>
             </div>
           );
         }
       }
       return (
         <React.Fragment>
           <div className="search">
             <input
               type="text"
               className="search-box"
               onChange={onChange}
               onKeyDown={onKeyDown}
               value={userInput}
             />
             <input type="submit" value="" className="search-btn" />
           </div>
           {optionList}
         </React.Fragment>
       );
     }
   }
  ReactDOM.render(<App />, document.querySelector("#app"));

一旦我尝试运行它，我会得到两个错误：一个是合成事件被重用于性能问题，另一个是组件更改受控输入

标签： reactjs

reactjs - API 调用后在 React 中更新状态时遇到问题

问题描述

解决方案

推荐阅读