Reactjs React应用程序不重新渲染

这就是我的渲染函数的样子

render() {
    const { Ether } = this.state;
    return (
      <div>
        <Container text>
          <Form onSubmit={this.handleSubmit}>
            <Label>Ether Value</Label>
            <Input
              name="Ether"
              value={Ether}
              onChange={this.handeleChange}
              placeholder="Enter Ether"
            />
            <Button type="Submit">ADD PLAYER TO LOTTERY</Button>
          </Form>
          <Button onClick={this.pickWinner}>PickWinner</Button>
        </Container>
      </div>
    );
  }

• 根据对react的理解，组件将在每个 我设置状态的时间。我的onChange处理程序不应该导致 当我在输入框中不断键入时，会出现多个渲染
• 这是我的组件

  async componentDidMount() {
     const Manager = await lottery.methods.manager().call();
     const Players = await lottery.methods.getPlayers().call();
     const Balance = await web3.eth.getBalance(lottery.options.address);
     this.setState({
       Manager,
       Balance,
       Players
     });
   }
  

  我希望它是如何工作的，每次我点击submit，我都希望调用componentdidmount，即重新呈现组件，但这不是发生的事情

我错过了什么？还有更多我还没有掌握的组件渲染吗

- componentDidMount is a life cycle method of react. componentDidMount
- will call only once after render. When you change state, render
- function will call again but componentDidMount will not.

结帐链接供您参考

---

首先，在组件装载后调用

componentDidMount（）

其次，您的输入似乎没有正确设置。有关如何处理输入的简单示例，请参阅

类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
名称：“反应”
};
}
handleChange=（e）=>{
const name=e.target.value；
这是我的国家({
名称
});
}
render（）{
返回(
);
}
}

如何定义

输入

组件？你确定它正在按预期将

名称

和

值

参数传递给你的

句柄更改

吗？如果你举个例子，我会帮你看一看。那么你想在键入或单击提交时更新状态吗？不清楚。@Colin请停止滥发信息，在每个标记为

reactjs

@trixn的问题下，这不是滥发信息，我只在我可以轻松修复他们的代码时发布，如果我可以运行它的话。如果我可以通过阅读来修复它，我不会要求提供一个示例。不，

componentDidMount（）

仅在初始化期间调用，除非该组件已卸载，否则将调用

componentdiddupdate（）

。抱歉，我的意思是在组件装载之后。这对我来说很有效，但在我的情况下，我有多个函数，如handleChange，因此，每次调用函数看起来有点重复，正如其中一个答案中所述，使用componentDidUpdate是更好的解决方案吗？@TanmayBhattacharya:-componentDidUpdate将在第二次渲染调用后调用。在您的情况下，调用

您的函数

不是一个安全的地方。正如你所说，你有很多功能，比如handleChange。假设您有一个函数调用handleChange，handleChange1。对于handleChange和handleChange1，您需要更新状态并分别调用您的函数、您的函数1。在这种情况下，componentDidUpdate将调用并且两个

yourfunction、yourfunction1

都将调用，因为您希望一次只调用一个函数。@TanmayBhattacharya要了解有关react生命周期react的更多信息，请访问下面的链接。[]（反应生命周期）[`]（反应生命周期）

- componentDidMount is a life cycle method of react. componentDidMount
- will call only once after render. When you change state, render
- function will call again but componentDidMount will not.

 componentDidMount() {
     yourfunction();
 }

 handeleChange = (e, { name, value }) => {
    this.setState({
      [name]: value
    });
    yourfunction();
 };

 yourfunction () {
    const Manager = await lottery.methods.manager().call();
    const Players = await lottery.methods.getPlayers().call();
    const Balance = await web3.eth.getBalance(lottery.options.address);
    this.setState({
        Manager,
        Balance,
        Players
    });
 }

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  handleChange = (e) => {
    const name = e.target.value;

    this.setState({
      name,
    });
  }

  render() {
    return (
      <div>
        <Hello name={this.state.name} />
        <input onChange={this.handleChange} />
      </div>
    );
  }
}