代码之家 › 专栏 › 技术社区 › Shai UI

如何在react中设置类对象?

reactjs javascript

Shai UI · 技术社区 · 6 年前

我在类中有一个要修改的对象数组,只有当发生按键时,我才希望以可视方式呈现这个对象。

class Example extends React.Component {
    constructor(props) { 
       super(props); 
       this.myArr = []; // this is an array of objects 
    }

    render() {  
       return (
        ???
       );
    }
}

现在我用许多不同的方法修改了this.myarr的内容。只有当我准备好(在按键或其他事件上)时,我才想渲染它。

现在在我的render()中,我应该引用 我是迈拉。 然后使用 this.forceUpdate() 当我想强制重新渲染时。

或者我应该把我的房间搬到 本州,迈拉 ,并在我的方法中修改this.state.myarr,当我准备好显示它时,在我的render()引用中 本州,迈拉 然后以某种方式强迫一个重转发器 this.setState(myArr: this.state.myArr);

5 回复 | 直到 6 年前

twils0 6 年前

***第二次更新-我想这可能是你想要的。显然,您需要为鼠标单击事件添加大量逻辑。不过,它应该给你指明正确的方向。

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.myArr = [];

    this.state = {
      myArr: [{ width: 10 }, { width: 20 }], // header widths
    };
  }

  // call changeHeaders when needed
  // it will update state, which will cause a re-render
  changeHeaders = (column, newWidth) => {
    const newArr = [...this.state.myArr];

    if (newArr[column]) {
      newArr[column].width = newWidth;
    }

    this.setState({ myArr: newArr });
  }

  renderArray = () => {
    return this.state.myArr.map(({ width }) => <div>{width}</div>);
  }

  render() {
    return (
      <div>
        {this.renderArray()}
      </div>
    );
  }
}

Robert Chan 6 年前

任何一种方法都可以,但我认为使用this.state保存数组并使用this.setstate()强制重新呈现并在keypress事件回调中调用this.setstate是更好的做法。

以下是更新数组值的方法- Correct modification of state arrays in ReactJS

有一个很好的解释为什么您应该避免在 here 由克里斯回答。

Kit Isaev 6 年前

在这种情况下,您应该使用state。状态用于影响组件外观的任何数据。记住你 可能不会 直接修改您的状态,这是一个反模式。相反,您应该创建数组的一个副本,并用修改后的副本更新状态。就像这样:

class Example extends React.Component {
  constructor(props) { 
    super(props); 
    this.state = {myArr: []}; // this is an array of objects 
  }

  mutateArraySomehow() {
    const nextArr = [...this.state.myArr];
    nextArr.push('heyyoooo');
    this.setState({myArr: nextArr});
  }

  render() {  
    return (
      ???
    );
  }
}

andylamax 6 年前

我就是这样做的

class Example extends React.Component {
   constructor(props) { 
      super(props);
      this.state = {
       myArr: [],
       display: false
      }
   }

   render() {
      if(this.state.display) {
       return (
          <MyComponent onKeyPress=(ev=>{
              this.setState({display: true})
          })
         />
       );
      } else {
       return (<div></div>)
      }
   }
}

rrd 6 年前

当对数组元素进行修改时,需要将状态设置为“真”。这将执行条件呈现并显示修改后的数组。

class Example extends React.Component {
  constructor(props) { 
    super(props); 
    this.state = {
      myArr = []; // this is an array of objects 
      status:false
    }
  }

  modifyArr = () => {
    //some array modifications
    this.setState({status:true})
  }

  render() {  
    return (
      {this.state.status ? null : (<div>`Display your array here`</div>)}
    );
  }
}