结账链接供您参考

Question

这就是我的渲染功能的样子

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

这是我的handleChange

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

从对反应的理解，每个都重新渲染组件我设置状态的时间。所以不应该是我的onChange处理程序多次渲染，因为我一直在输入框中输入。

这是我的componentdidMount

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

我希望它如何工作，每次我点击提交时，我都希望调用componentdidmount，即要重新渲染的组件，但这不是发生的事情。

我在这里缺少什么？是否有更多的组件渲染，我还没有掌握？

Answer 1

- 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.

结账链接供您参考

React life cycle method componentDidMount

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

Answer 2

首先，在组件安装后调用componentDidMount()。

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

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

React App不重新渲染

2 个答案:

结账链接供您参考