如何在 React 中显示包含姓名、年龄、位置和 phone 道具的联系人列表？我的代码不显示任何内容

Question

import React, {useState} from 'react';
import ReactDOM from 'react-dom';
import './index.css';
const initiaState = {
   name: '',
   age: '',
   location: '',
   phone: ''
}
function AddPersonForm(props){
   const [state, setState] = useState(initiaState);
   const handleChange=(e) => { 
       let value = e.target.value;
       let name = e.target.name;
       setState({...state, [name]: value});
    }
    function handleSubmit(e){
       if (state.name !=='' && state.age !=='' && state.location !=='' && state.phone !==''){
          props.handleSubmit(state);
          setState({
             name: '',
             age: '',
             location: '',
             phone: '''
          });
        }
       e.preventDefault()
    }
}
  return (
     <form onSubmit = {handleSubmit}>
         <input type = 'text' placeholder = 'Add name' onChange={handleChange}
         name = 'name' value={state.name} /><br/>
         <input type = 'text' placeholder = 'Add age' onchange={handleChange} 
         name = 'age' value = {state.age} /><br />
         <input type = 'text' placeholder = 'Add location' onChange={handleChange}
         name = 'location' value= {state.location}/><br />
         <input type = 'text' placeholder='Add phone' onChange={handleChange}
         name = 'phone' value={state.phone} /> <br/>
         <button type = 'submit'>Add</button>
   );
}
function PeopleList(props){
   const arr = props.data;
   const listItems = arr.map((val, index) =>
       <li key={index}>{val}</li>
       );
   return <ul>{listItems}</ul>;
}
function ContactManager(props){
   const[contacts, setContacts] = useState(props.data)
   function addPerson(state){
      setContacts([...contacts, state]);
   }
   return(
      <div>
         <AddPersonForm handleSubmit = {addPerson}/>
         <PeopleList data = {contacts}/>
      </div>
   );
}
const contacts = [{name:'james smith', age:'23', location:'uk', phone:'09157364496'}, 
{name:'bruce wayne', age :'27', location: 'nigeria', phone:'08130058157'},
{name:'bruce wayne', age :'27', location: 'nigeria', phone:'08130058157'},];
ReactDOM.render(<ContactManager data = {contacts}/>,
 document.getElementById('root'));

分为三个部分； AddPersonForm、PeopleIst 和 ContactManager AddPersonForm 是一个带有文本字段和添加按钮的表单，并使用状态来管理文本字段的值 PeopleList 是一个联系人列表，接收一个代表联系人的数组，并在页面上呈现一个列表 ContactManager 包括 AddPersonForm 和 PeopleList 作为子组件，并在其状态下保存联系人列表。它使用道具接收初始联系人列表，将其保存在其状态并将联系人列表传递给子组件。

Answer 1

在 handleSubmit 函数中设置状态时，phone 键有三个引号，这会出错。

您错过了 AddPersonForm 中 <form> 组件的结束标记。

您在 AddPersonForm 的 return 语句之前多了一个大括号。

在 PeopleList 组件内映射了 listItems，您正试图在 li 内直接渲染 val，这是一个接触对象。 React 对此抱怨，您在控制台中收到错误：

Objects are not valid as a React child (found: object with keys {name, age, location, phone}).

所以也许可以将其更改为 {val.name} 之类的内容，这样就可以了。

如何在 React 中显示包含姓名、年龄、位置和 phone 道具的联系人列表？我的代码不显示任何内容

how can I display a list of contacts with name, age, location, and phone props in react? my code does not display anything

javascript

reactjs

react-hooks

jsx