如何从另一个类创建一个对象，并将其推入状态数组？

Question

我目前正在开发一个 React 应用程序，其中有两个类 - 我们称它们为类 App 和类 Container。 基本上，类 App 有一个状态数组，我想在这个数组中有很多 Container 对象。

class Container extends React.Component{
    render(){
       return(
          <img src= {this.props.url} />
       );
    }
}



class App extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            url: ""
            data: []
        }
    }


    handleSubmit(event){
        event.preventDefault();

        //I WANT TO BE ABLE TO MAKE A NEW CONTAINER, AND PASS THE URL AS PROPS.
        // THEN, I WANT TO ADD THAT CONTAINER TO THE ARRAY.     

        this.setState({
            data: url = this.state.url, id = 'a'
        });
    }


    render(){
        return (
           <form onSubmit={this.handleSubmit}>
                <label htmlFor="url">url:</label>
                    <input
                        type = "text"
                        name = "url"
                        value = {this.state.url}
                        onChange = {this.handleChange}
                    />
           </form>

        )
    }
}

在上面的函数 handleSubmit() 中，我想向数组添加一个包含 props URL 的新容器。 我该怎么做？

Answer 1

1. 不要改变状态
2. 你只需要状态中的url ，而不是整个容器
3. 使用setState修改状态
4. 考虑使用扩展运算符 ( ... ) 进行连接
5. 我在你的代码中没有看到handleChange

    class Container extends React.Component {
      render() {
        return <img src={this.props.url} />;
      }
    }

    class App extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          url: "",
          containers: []
        };
      }

      handleChange = e => {
        this.setState({
          url: e.target.value
        });
      };

      handleSubmit = event => {
        event.preventDefault();
        if (this.state.url) {
          this.setState({
            containers: [...this.state.containers, this.state.url],
            url: ""
          });
        }
      };

      render() {
        const { url, containers } = this.state;
        return (
          <div>
            <form onSubmit={this.handleSubmit}>
              <label htmlFor="url">url:</label>
              <input
                type="text"
                name="url"
                value={url}
                onChange={this.handleChange}
              />
              <button>submit</button>
            </form>

            <h2>Containers:</h2>
            <div>
              {!containers.length && <i>no urls added</i>}
              {containers.map((_url, i) => (
                <Container key={i} url={_url} />
              ))}
            </div>
          </div>
        );
      }
    }

    render(<App />, document.getElementById("root"));

工作示例： https : //stackblitz.com/edit/react-g72uej