Javascript 更改状态的特定属性

我正在学习ReactJS，不用说我是一个绝对的初学者！我试图更改对象数组中属于状态的特定属性。每个对象都有两个属性：名称和活动。默认情况下，活动值为false单击该项目时，我想将该项目的活动值更改为true。

我的数组显示在列表元素内部，每个列表元素都有

onClick={（）=>props.onChangeSelected（lang.name）}

方法

OnChangesCeted

方法转到

handleChangeSelected（name）

函数，但是，我不知道在这个函数中写什么

  class Loading extends React.Component {
      constructor(props) {
        super(props);

        this.state = {
          text: 'Loading'
        };
      }
      componentDidMount() {
        const stopper = this.state.text + '...';

        this.interval = window.setInterval(() => {
          this.state.text === stopper
            ? this.setState(() => ({ text: 'Loading' }))
            : this.setState((prevState) => ({ text: prevState.text + '.' }))
        }, 300)
      }
      componentWillUnmount() {
        window.clearInterval(this.interval);
      }
      render() {
        return (
          <p>
            {this.state.text}
          </p>
        )
      }
    }

    function LanguageList (props) {
      return (
          <div>
          <h3>Choose your favorite:</h3>
          <ul>
          {props.list.map((lang) => (
            <li key={lang.name} onClick={() => props.onChangeSelected(lang.name)}>
            <span>{lang.name}</span>
            </li>
            ))}
          </ul>
          </div>
        )
    }

 class App extends React.Component {
      constructor(props) {
        super(props)
        this.state = {
          languages: [
            {
              name: 'all',
              active: true
            },

            {
              name: 'javascript',
              active: false
            },

            {
              name: 'ruby',
              active: false
            },
            {
              name: 'python',
              active: false
            }

          ]
        }

        this.handleChangeSelected = this.handleChangeSelected.bind(this)
      }

      handleChangeSelected(name) {
         this.setState((currentState) => {
             const lang = currentState.languages.find((lang) => lang.name === name)
             return {}
         })
      }

    render() {
        return (
          <div>
            <LanguageList 
            list={this.state.languages}
            onChangeSelected={this.handleChangeSelected}
            />
          </div>
        )
      }
    }

    ReactDOM.render(
      <App />,
      document.getElementById('app')
    )
  </script>

类加载扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
文本：“正在加载”
};
}
componentDidMount（）{
const stopper=this.state.text+'…'；
this.interval=window.setInterval（（）=>{
this.state.text==stopper
？this.setState（（）=>（{text:'Loading'}））
：this.setState（（prevState）=>（{text:prevState.text+'.}））
}, 300)
}
组件将卸载（）{
window.clearInterval（this.interval）；
}
render（）{
返回(

{this.state.text}

)
}
}
函数语言列表（道具）{
返回(
选择您最喜欢的：

{props.list.map（（lang）=>(
props.onChangeSelected（lang.name）}>
{lang.name}

))}

)
}
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
语言：[
{
名称：'全部'，
主动：正确
},
{
名称：“javascript”，
活动：错误
},
{
名称：“ruby”，
活动：错误
},
{
名称：“python”，
活动：错误
}
]
}
this.handleChangeSelected=this.handleChangeSelected.bind（this）
}
handleChangeSelected（名称）{
this.setState（（当前状态）=>{
const lang=currentState.languages.find（（lang）=>lang.name==name）
返回{}
})
}
render（）{
返回(
)
}
}
ReactDOM.render(
,
document.getElementById（'app'）
)

试试这个

handleChangeSelected(name){

    // Find matching element in state
    var temp = this.state.languages;

    for (var i = 0; i < temp.length; i++){
        if (temp[i]["name"] === name){
            temp[i]["active"] = true;
        }
    }

    this.setState({
        languages: temp
    });
}

handleChangeSelected（名称）{
//在状态中查找匹配的元素
var temp=this.state.languages；
对于（变量i=0；i

如中所列，他们建议在调用

setState

函数时创建一个新对象。这当然是在讨论更新程序函数语法（

This.setState（（prevState，props）=>{return{…}；}）；

），我假设上面使用的语法也应用了相同的逻辑（将对象传递到set状态）

第一个参数[to setState]是一个带有签名的更新程序函数：

（prevState，props）=>stateChange

（prevState，props）=>stateChange prevState是对 以前的州它不应该直接变异。取而代之的是变化 应通过基于来自的输入构建新对象来表示 状态和道具

---

你可以用很多方法来做。您需要确保的是您没有改变原始状态数组

  handleChangeSelected(name) {
     this.setState((currentState) => {
         return { languages: currentState.languages.map((lang) => {
              if(lang.name === name) {
                   return {...lang, active: true};
              }
              return lang;
         });
     })
  }

---

这应该是可行的，但我正在努力找到一个不同的解决方案。我的意思是这一定是一种使用函数式编程的方法。更新了我的答案。react文档说您应该将一个新对象传递到

setState

方法中。我假设这个推理是在所有不同的方式背后，你可以设置对象的状态，如他们的文档中所列（包括我上面回答中的方法）：