Question

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

我的数组显示在list元素内部，并且每个list元素都有onClick={() => props.onChangeSelected(lang.name)}方法。 onChangeSleceted方法进入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>

Answer 1

尝试一下？

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
    });
}

如React docs中所列，他们建议在调用setState函数时创建一个新对象。当然，这是在谈论更新器函数语法（this.setState((prevState, props) => {return {...};});），我假设对上面使用的语法（将对象传递到设置状态）采用了相同的逻辑

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

(prevState, props) => stateChange

（prevState，props）=> stateChange prevState是对   以前的状态。 不应直接对其进行突变。相反，变化   应该通过根据来自   prevState和道具。

Answer 2

您可以通过多种方式进行操作。您需要确定的是您不会变异原始状态数组

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

改变国家的特定财产

2 个答案: