Question

我正在学习反应，并且一直坚持不更新列表组件。该组件显示了我手动添加的所有列表元素，但未呈现任何更改。

我搜索了很多解决方案。我所有的更改处理程序都已绑定，handleSubmit中的setState应该更新ClockRow ...

我的App.js：

import React, { Component } from 'react';
import Clock from './Clock';
import ClockRow from './ClockRow';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {items: [], tle: 'Teszt', ival: 200};

        this.handleChangeTitle = this.handleChangeTitle.bind(this);
        this.handleChangeInterval = this.handleChangeInterval.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChangeTitle(event) {
        this.setState({tle: event.target.value});
    }

    handleChangeInterval(event) {
        this.setState({ival: event.target.value});
    }

    handleSubmit(event) {
        if(this.state.tle.length > 0 && this.state.ival > 9){
            this.setState({items: [...this.state.items, <Clock interval={this.state.ival} title={this.state.tle} />]});
        }

        event.preventDefault();
    }

    render(){
        return (
            <div>
                <div className="row">
                    <h1 className="col text-center">Hello, React!</h1>
                </div>
                <div className="row">
                    <form onSubmit={this.handleSubmit}>
                        <label>
                            Title: <input type="text" name="tle" value={this.state.tle} onChange={this.handleChangeTitle} />
                        </label>
                        <label>
                            Interval: <input type="number" name="ival" value={this.state.ival} onChange={this.handleChangeInterval} />
                        </label>
                        <input type="submit" value="Add"  />
                    </form>
                </div>
                <ClockRow clockItems={this.state.items} />
            </div>
        );
    }
}

export default App;

我的ClockRow.js：

import React, { Component } from 'react';

class ClockRow extends Component{
    constructor(props){
        super(props);
        this.state = {clocks: props.clockItems.map((x, i) => <div className="col" key={i}>{x}</div>) }
    }

    render(){
        return(<div className="row">{this.state.clocks}</div>
    )};
}

export default ClockRow;

我的Clock.js：

import React, { Component } from 'react';
import {Card, CardTitle, CardBody, CardFooter} from 'reactstrap';

class Clock extends Component {
    constructor(props){
        super(props);
        this.state = {counter: 0, interval: parseInt(props.interval), title: props.title};
    }

    componentDidMount() {
        this.timerID = setInterval(() => this.tick(), this.state.interval);
    }

    componentWillUnmount() {
        clearInterval(this.timerID);
    }

    tick() {
        this.setState((state) => ({
            counter: state.counter + 1
        }));
    }

    render() {
        return (
            <Card>
                <CardTitle>{this.state.title}</CardTitle>
                <CardBody>{this.state.counter}</CardBody>
                <CardFooter>{this.state.interval}</CardFooter>
            </Card>
        );
    }
  }

  export default Clock;

Answer 1

CodeSandbox： https://codesandbox.io/s/zxlzzv05n3

ClockRow.js是多余的
Clock.js不变

App.js更改为“ React样式”：

import React, { Component } from "react";
import Clock from "./Clock";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { items: [], inputTle: "Teszt", inputIval: 200 };
  }

  handleChangeTitle = event => {
    this.setState({ inputTle: event.target.value });
  };

  handleChangeInterval = event => {
    this.setState({ inputIval: event.target.value });
  };

  handleSubmit = event => {
    console.log(this.state);

    if (this.state.inputTle.length > 0 && this.state.inputIval > 9) {
      this.setState(prevState => {
        return {
          items: [
            ...prevState.items,
            {
              title: this.state.inputTle,
              interval: this.state.inputIval
            }
          ]
        };
      });
    }

    event.preventDefault();
  };

  render() {
    return (
      <div>
        <div className="row">
          <h1 className="col text-center">Hello, React!</h1>
        </div>
        <div className="row">
          <form onSubmit={this.handleSubmit}>
            <label>
              Title:{" "}
              <input
                type="text"
                name="tle"
                value={this.state.inputTle}
                onChange={this.handleChangeTitle}
              />
            </label>
            <label>
              Interval:{" "}
              <input
                type="number"
                name="ival"
                value={this.state.inputIval}
                onChange={this.handleChangeInterval}
              />
            </label>
            <input type="submit" value="Add" />
          </form>
        </div>

        <div className="row">
          {this.state.items.map((item, index) => (
            <div className="col" key={index}>
              <Clock {...item} />
            </div>
          ))}
        </div>
      </div>
    );
  }
}

export default App;

反应组件数组未更新

1 个答案: