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

Answer 2

无论哪种方式都可行，但我认为更好的做法是使用this.state来保存数组并使用this.setState（）强制重新渲染并在keypress事件回调中调用this.setState

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

有一个非常好的解释，为什么你应该避免在Chris回答的here中使用this.forceUpdate（）。

Answer 3

在这种情况下，您应该使用州。 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 (
      ???
    );
  }
}

Answer 4

我就是这样做的

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

Answer 5

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

mytext="<html><head></head><body>
<div id='mycustomelement'>
{  ('.blog-data')response //how to get this  }
</div></body></html>"

Answer 6

简而言之，在类中定义 state 如下：

state: {
   firstName: String
} = {
   firstName: ''
}

在 render 函数中，你会这样做：

this.setState({ firstName: 'Junior' })

如何在React中setState一个类对象？

6 个答案: