Reactjs 在react中设置状态问题

我只是在学习如何通过制作一个搜索可用域名的应用程序来做出反应，现在我想让它变得更复杂。。然而，我认为我的一个函数中的setState非常笨拙，并且我非常确定以这种形式继续使用它是一个性能问题

我遇到的困难是onChangeWord，每当用户在输入框中键入任何内容时，它都会运行。它当前使用的是map函数，因此每次用户键入时，它都会修改

单词

状态数组，数组中未修改的所有其他单词也会使用map函数&if语句进行重置。现在我想给每个单词添加同义词（有时每个单词200多个），所以我认为我做得不对。。它映射到每一个单词和每一个字母输入时的状态位。。当然有更好的办法

是否有方法清理onChangeWord函数和/或更改

单词

状态的结构，以便此函数更干净

/// ControlPanel.js ///
export default class ControlPanel extends Component {
  state = {
    words: 
    [
      { 
        word: "",
        id: 1,
        column: 1,
        // synonymns: {
        //   all:[],
        //   selected:[]
        // }
      },
      { 
        word: "",
        id: 2,
        column: 2,
        // synonymns: {
        //   all:[],
        //   selected:[]
        // }
      }
    ]
  }

  onChangeWord = (columnId, e) => {
    const { words } = this.state
    const newWords = []
    words.map(word => {
      if(word.id == e.target.id){
        newWords.push( {word: e.target.value, id: word.id, column: columnId} ) 
      } else {
        newWords.push( {word: word.word, id: word.id, column: word.column} ) 
      } return null;
    })
    this.setState ({words: newWords})
  }

  // onAddWord = id => {...}
  // onRemoveWord = id => {...}
  // combineWords() {
  // ...etc
  // render() {...}
}

//////////////

/// WORD.js //

const Word = ({onRemoveWord, wordId, onChangeWord, columnId}) => {
  return (
    <div>
       <input 
          type="text"
          name="word" 
          id={wordId} 
          onChange={(e) => onChangeWord(columnId, e)} 
        /> 
        <span onClick={() => {onRemoveWord(wordId)}} className="deletebtn">-</span>
    </div>
  )
}

/////////////

///ControlPanel.js///
导出默认类控制面板扩展组件{
状态={
话：
[
{ 
字：“，
id:1，
专栏：1，
//同义词：{
//全部：[]，
//选定：[]
// }
},
{ 
字：“，
id:2，
专栏：2，
//同义词：{
//全部：[]，
//选定：[]
// }
}
]
}
onChangeWord=（columnId，e）=>{
const{words}=this.state
常量新词=[]
words.map（word=>{
if（word.id==e.target.id）{
newWords.push（{word:e.target.value，id:word.id，column:columnId}）
}否则{
newWords.push（{word:word.word，id:word.id，column:word.column}）
}返回null；
})
this.setState（{words:newWords}）
}
//onAddWord=id=>{…}
//onRemoveWord=id=>{…}
//combineWords（）{
//…等等
//render（）{…}
}
//////////////
///WORD.js//
常量字=（{onRemoveWord，wordId，onChangeWord，columnId}）=>{
返回(
onChangeWord（columnId，e）}
/> 
{onRemoveWord（wordId）}className=“deletebtn”>-
)
}
/////////////

您没有使用columnId检查要识别的单词

重构

onChangeWord = (columnId, e) => {
    const { words } = this.state
    const newWords = []
    words.map(word => {
      if(word.id == e.target.id){
        newWords.push( {word: e.target.value, id: word.id, column: columnId} ) 
      } else {
        newWords.push( {word: word.word, id: word.id, column: word.column} ) 
      } return null;
    })
    this.setState ({words: newWords})
  }

到

---

具有固定id的单词是否总是在同一列中？如果是这样，您可以按列存储单词，只需在该子集上运行映射即可。对于过去的“键入内容并更新”输入，我使用了onBlur而不是onChange，这将在单元格失去焦点而不是键入内容后发生

如果你想在他们键入时更新，但不是每次击键，也不一定是当焦点丢失时，我会考虑做一个定时器的更新。这会给你一些缓冲。

希望对你有所帮助

请注意，您可能不需要发送

columnId

，您可以从

…w

获得它

---

onChangeWord = (columnId, e) => {
    const { words } = this.state
    const newWords = words.map(word => {
      if(word.id === columnId){
        return {...word, 'word': e.target.value} 
      }
      return word
    })
    this.setState ({words: newWords})
  }

    onChangeWord = (columnId, e) => this.setState ({
             words: this.state.words.map(w => w.id == e.target.id 
                ? {...w, word: e.target.value, column: columnId} 
                : w
   })