Javascript 在ComponentDidMount中赋值，而不是在React中赋值

以下是我的代码（工作正常），我可以根据文本框中提供的输入对列表进行排序。在

constructor

方法中，我这样声明了我的状态-

this.state = {
      data: ["Adventure", "Romance", "Comedy", "Drama"],
      tableData: []
    };

在

componentDidMount

方法中，我在

tableData

中分配

data

键状态

  componentDidMount() {
    this.setState({
      tableData: this.state.data
    });
  }

我的问题是-这样做是否正确，因为我自己对代码质量没有信心（将tableData初始化为

[]

，然后在

componentDidMount

方法中设置

tableData:this.state.data

）。让我知道我是否可以改进这一点，如果我

从API获取数据，这将改变什么，因为API是应用程序中初始化和使用的最佳位置

工作代码示例-

代码-

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: ["Adventure", "Romance", "Comedy", "Drama"]
    };
    this.handleChange = this.handleChange.bind(this);
  }

  refineDataList(inputValue) {
    const listData = this.state.data;
    const result = listData.filter(item =>
      item.toLowerCase().match(inputValue.toLowerCase())
    );
    this.setState({
      data: result
    });
  }

  handleChange(e) {
    const inputValue = e && e.target && e.target.value;
    this.refineDataList(inputValue);
  }
  render() {
    return (
      <div className="App">
        <h3>DATA SEARCH</h3>
        <div className="form">
          <input type="text" onChange={this.handleChange} />
        </div>
        <div className="result">
          <ul>
            {this.state.data &&
              this.state.data.map((item, i) => {
                return <li key={i}>{item}</li>;
              })}
          </ul>
        </div>
      </div>
    );
  }
}

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据：[“冒险”、“浪漫”、“喜剧”、“戏剧”]
};
this.handleChange=this.handleChange.bind（this）；
}
细化数据列表（inputValue）{
const listData=this.state.data；
const result=listData.filter（项=>
item.toLowerCase（）.match（inputValue.toLowerCase（））
);
这是我的国家({
数据：结果
});
}
手变（e）{
常量inputValue=e&&e.target&&e.target.value；
此.definedatalist（inputValue）；
}
render（）{
返回(
数据搜索

{this.state.data&&
this.state.data.map（（项，i）=>{
返回
{item}
；
})}

);
}
}
您做得很好，但您是对的有一种更好的方法，处理两个事实点很难维护，因此您应该只有一个包含所需单词的数据数组，因此您过滤值的方法是将
过滤器
变量创建为状态，以存储要过滤的当前单词，所以你应该加上这样的东西

// in the constructor function
constructor(props) {
  super(props);
  this.state = {
    data: ["Adventure", "Romance", "Comedy", "Drama"],
    filter: ""
  }
}

// create a filter function
getFilteredResults() {
  const { filter, data } = this.state;
  return data.filter(word => String(word).toLowerCase().match(filter));
}

// and finally into your render function
render() {
  return (
    <div>
      {this.getFilteredResults().map((word) => (
        <div>{word}</div>
      ))}
    </div>
  );
}

这样，你将只维持一个真理点，它将按预期工作

注意：我们使用
String（word）.toLowerCase（）
来确保当前
word
实际上是一个
String
，因此我们可以避免
toLowerCase不是未定义的
错误的函数，如果由于某种原因，word不是字符串。
如果将“数据”和“表格数据”都设置为第一个的值，为什么同时需要“数据”和“表格数据”？为什么不从状态中删除数据并将tableData设置为初始值？关于获取，如果只获取一次，那么componentDidMount是一个很好的方法。@Yossi我用单一数据源尝试了这个方法，但问题是筛选this.state.data也会发生变化，所以我需要另一个变量来存储筛选后的数据，我不明白。你能发布整个组件吗？@Yossi请检查此代码-请在这里发布，这对我来说更方便，如果需要，也更容易参考代码片段
handleChange(e) {
  const inputValue = e && e.target && e.target.value;
  this.setState({ filter: inputValue });
  //this.refineDataList(inputValue);
}