javascript - 如何在 React 中设置一个类对象？

Question

我正在修改我的类中的一组对象，只有当按键发生时，我才想以可视方式呈现该对象。

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

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

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

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

或者我应该将 myArr 移动到 this.state.myArr 中，并在我的方法中修改 this.state.myArr，当我准备好显示它时，在我的 render() 引用中修改 >this.state.myArr，并以某种方式强制重新渲染 this.setState(myArr: this.state.myArr);

Answer 1

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

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