Javascript 为什么新动态添加的卡组件没有'；请不要在提交表格时重新提交_Javascript_Reactjs

Javascript 为什么新动态添加的卡组件没有'；请不要在提交表格时重新提交

javascript reactjs

Javascript 为什么新动态添加的卡组件没有'；请不要在提交表格时重新提交,javascript,reactjs,Javascript,Reactjs,我试图从GitHub用户API获取数据并将JSON存储在一个数组中，然后在提交表单时通过数组循环并动态创建卡片组件，但即使使用新添加的用户更新了数组，卡片组件也不会呈现在提交有效表单之前和之后，我在开发人员控制台上添加了相关的代码文件和React组件树的图像。谢谢 App.js import React from "react"; import Form from "./Form"; import Cardlist from "./Cardli

我试图从GitHub用户API获取数据并将JSON存储在一个数组中，然后在提交表单时通过数组循环并动态创建卡片组件，但即使使用新添加的用户更新了数组，卡片组件也不会呈现

在提交有效表单之前和之后，我在开发人员控制台上添加了相关的代码文件和React组件树的图像。谢谢

App.js

import React from "react";
import Form from "./Form";
import Cardlist from "./Cardlist";
import ProfileData from "../JSON";

export default class App extends React.Component {
  testData = ProfileData();
  state = {
    profiles: this.testData,
  };
  addNewProfile = (profile) => {
    this.setState({
      profiles: [...this.state.profiles, profile],
    });
  };
  render() {
    return (
      <div>
        <h4>GITHUB PROFILE CARDS</h4>
        <Form onSubmit={this.addNewProfile} />
        <Cardlist profiles={this.state.profiles} />
      </div>
    );
  }
}

import React from "react";

export default class Form extends React.Component {
  state = { userName: "" };
  handleSubmit = (event) => (
    event.preventDefault(),
    fetch(`https://api.github.com/users/${this.state.userName}`)
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        this.props.onSubmit(data);
      })
  );
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input
            type="text"
            placeholder="username"
            value={this.state.userName}
            onChange={(event) =>
              this.setState({ userName: event.target.value })
            }
          />
          <button>Add Card</button>
        </form>
      </div>
    );
  }
}

import React from "react";
import Card from "./Card";

export default class Cardlist extends React.Component {
  profile = this.props.profiles.map((element) => (
    <Card key={element.id} {...element} />
  ));
  render() {
    return (<div>{this.profile}</div>);
  }
}

import React from "react";

export default class Card extends React.Component {
    render() {
        return(
            <div style = {{display: 'flex'}}>
                <img src = {this.props.avatar_url} style = {{width: '100px', height: '100px'}}/>
                <div>
                    <h6>{this.props.name}</h6>
                    <h6>{this.props.name}</h6>
                </div>
            </div>
        );
    }
}

从“React”导入React；
从“/Form”导入表单；
从“/Cardlist”导入卡片列表；
从“./JSON”导入ProfileData；
导出默认类App扩展React.Component{
testData=ProfileData（）；
状态={
profiles:this.testData，
};
addNewProfile=（配置文件）=>{
这是我的国家({
配置文件：[…this.state.profiles，profile]，
});
};
render（）{
返回(
GITHUB配置文件卡
);
}
}

Form.js

import React from "react";
import Form from "./Form";
import Cardlist from "./Cardlist";
import ProfileData from "../JSON";

export default class App extends React.Component {
  testData = ProfileData();
  state = {
    profiles: this.testData,
  };
  addNewProfile = (profile) => {
    this.setState({
      profiles: [...this.state.profiles, profile],
    });
  };
  render() {
    return (
      <div>
        <h4>GITHUB PROFILE CARDS</h4>
        <Form onSubmit={this.addNewProfile} />
        <Cardlist profiles={this.state.profiles} />
      </div>
    );
  }
}

import React from "react";

export default class Form extends React.Component {
  state = { userName: "" };
  handleSubmit = (event) => (
    event.preventDefault(),
    fetch(`https://api.github.com/users/${this.state.userName}`)
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        this.props.onSubmit(data);
      })
  );
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input
            type="text"
            placeholder="username"
            value={this.state.userName}
            onChange={(event) =>
              this.setState({ userName: event.target.value })
            }
          />
          <button>Add Card</button>
        </form>
      </div>
    );
  }
}

import React from "react";
import Card from "./Card";

export default class Cardlist extends React.Component {
  profile = this.props.profiles.map((element) => (
    <Card key={element.id} {...element} />
  ));
  render() {
    return (<div>{this.profile}</div>);
  }
}

import React from "react";

export default class Card extends React.Component {
    render() {
        return(
            <div style = {{display: 'flex'}}>
                <img src = {this.props.avatar_url} style = {{width: '100px', height: '100px'}}/>
                <div>
                    <h6>{this.props.name}</h6>
                    <h6>{this.props.name}</h6>
                </div>
            </div>
        );
    }
}

从“React”导入React；
导出默认类表单扩展React.Component{
状态={userName:：}；
handleSubmit=（事件）=>(
event.preventDefault（），
取回(`https://api.github.com/users/${this.state.userName}`）
。然后（（响应）=>{
返回response.json（）；
})
。然后（（数据）=>{
this.props.onSubmit（数据）；
})
);
render（）{
返回(
this.setState（{userName:event.target.value}）
}
/>
添加卡
);
}
}

Cardlist.js

import React from "react";
import Form from "./Form";
import Cardlist from "./Cardlist";
import ProfileData from "../JSON";

export default class App extends React.Component {
  testData = ProfileData();
  state = {
    profiles: this.testData,
  };
  addNewProfile = (profile) => {
    this.setState({
      profiles: [...this.state.profiles, profile],
    });
  };
  render() {
    return (
      <div>
        <h4>GITHUB PROFILE CARDS</h4>
        <Form onSubmit={this.addNewProfile} />
        <Cardlist profiles={this.state.profiles} />
      </div>
    );
  }
}

import React from "react";

export default class Form extends React.Component {
  state = { userName: "" };
  handleSubmit = (event) => (
    event.preventDefault(),
    fetch(`https://api.github.com/users/${this.state.userName}`)
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        this.props.onSubmit(data);
      })
  );
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input
            type="text"
            placeholder="username"
            value={this.state.userName}
            onChange={(event) =>
              this.setState({ userName: event.target.value })
            }
          />
          <button>Add Card</button>
        </form>
      </div>
    );
  }
}

import React from "react";
import Card from "./Card";

export default class Cardlist extends React.Component {
  profile = this.props.profiles.map((element) => (
    <Card key={element.id} {...element} />
  ));
  render() {
    return (<div>{this.profile}</div>);
  }
}

import React from "react";

export default class Card extends React.Component {
    render() {
        return(
            <div style = {{display: 'flex'}}>
                <img src = {this.props.avatar_url} style = {{width: '100px', height: '100px'}}/>
                <div>
                    <h6>{this.props.name}</h6>
                    <h6>{this.props.name}</h6>
                </div>
            </div>
        );
    }
}

从“React”导入React；
从“/Card”导入卡片；
导出默认类Cardlist扩展React.Component{
profile=this.props.profiles.map（（元素）=>(
));
render（）{
返回（{this.profile}）；
}
}

Card.js

import React from "react";
import Form from "./Form";
import Cardlist from "./Cardlist";
import ProfileData from "../JSON";

export default class App extends React.Component {
  testData = ProfileData();
  state = {
    profiles: this.testData,
  };
  addNewProfile = (profile) => {
    this.setState({
      profiles: [...this.state.profiles, profile],
    });
  };
  render() {
    return (
      <div>
        <h4>GITHUB PROFILE CARDS</h4>
        <Form onSubmit={this.addNewProfile} />
        <Cardlist profiles={this.state.profiles} />
      </div>
    );
  }
}

import React from "react";

export default class Form extends React.Component {
  state = { userName: "" };
  handleSubmit = (event) => (
    event.preventDefault(),
    fetch(`https://api.github.com/users/${this.state.userName}`)
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        this.props.onSubmit(data);
      })
  );
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input
            type="text"
            placeholder="username"
            value={this.state.userName}
            onChange={(event) =>
              this.setState({ userName: event.target.value })
            }
          />
          <button>Add Card</button>
        </form>
      </div>
    );
  }
}

import React from "react";
import Card from "./Card";

export default class Cardlist extends React.Component {
  profile = this.props.profiles.map((element) => (
    <Card key={element.id} {...element} />
  ));
  render() {
    return (<div>{this.profile}</div>);
  }
}

import React from "react";

export default class Card extends React.Component {
    render() {
        return(
            <div style = {{display: 'flex'}}>
                <img src = {this.props.avatar_url} style = {{width: '100px', height: '100px'}}/>
                <div>
                    <h6>{this.props.name}</h6>
                    <h6>{this.props.name}</h6>
                </div>
            </div>
        );
    }
}

从“React”导入React；
导出默认类别卡扩展React.Component{
render（）{
返回(
{this.props.name}
{this.props.name}
);
}
}

之前的组件树

之后的组件树

在Cardlist.js中，直接返回映射元素，而不是使用类变量

import React from "react"; import Card from "./Card"; export default class Cardlist extends React.Component { render() { return this.props.profiles.map((element) => ( <Card key={element.id} {...element} /> )); } }

从“React”导入React；从“/Card”导入卡片；导出默认类Cardlist扩展React.Component{ render（）{ 返回此.props.profiles.map（（元素）=>( )); } }

正在进行演示。
虽然您的卡片列表收到了来自家长的新道具，然后获得了重新渲染，但此.profile超出了您的渲染功能，因此它永远不会更新。只要把它放在渲染函数中，它就可以正常工作

class Cardlist extends React.Component { render() { const profile = this.props.profiles.map((element) => ( <Card key={element.id} {...element} /> )); return <div>{profile}</div>; } }

类Cardlist扩展了React.Component{ render（）{ const profile=this.props.profiles.map（（元素）=>( )); 返回{profile}； } }

您可以将CardList组件更改为：

import React from "react"; import Card from "./Card"; export default class Cardlist extends React.Component { render() { return ( this.props.profiles.map((element) => ( <Card key={element.id} {...element} /> )) ); } }

从“React”导入React；从“/Card”导入卡片；导出默认类Cardlist扩展React.Component{ render（）{ 返回( this.props.profiles.map（（元素）=>( )) ); } }
CardList组件的问题在于，您有一个在创建CardList组件时初始化的类属性（配置文件），但在更新道具时，该类属性不会更新其值
PS：您还可以将类属性转换为函数

profile = () => ( this.props.profiles.map((element) => ( <Card key={element.id} {...element} /> )) );

profile=（）=>( this.props.profiles.map（（元素）=>( )) );
和在渲染

render() { return (<div>{this.profile()}</div>); }

render（）{ 返回（{this.profile（）}）； }
感谢您的回复，现在了解了为什么不进行重新渲染