我是React的新手，我正试图了解如何将数据从一个组件传递到另一个组件。我不知道我做错了什么。在下面的例子中，我认为在Form组件中返回状态就足以在Users列表中使用这些数据，但事实并非如此。有人能解释一下怎么做吗?
function Form({ add }) {
const [state, setState] = useState({ add });
const [firstName, setFirstName] = useState("");
const [lastName, setLastName] = useState("");
const [phone, setPhone] = useState(0);
const addUser = () => {
setState({
firstName: firstName,
lastName: lastName,
phone: phone,
});
return state;
};
return (
<form
onSubmit={(e) => {
e.preventDefault();
}}
>
<h1>Team Management</h1>
<label>First name:</label>
<br />
<input
className="userFirstname"
name="userFirstname"
type="text"
placeholder="First Name"
onChange={(event) => {
setFirstName(event.target.value);
}}
/>
<br />
<br />
<label>Last name:</label>
<br />
<input
className="userLastname"
name="userLastname"
type="text"
placeholder="Last Name"
onChange={(event) => {
setLastName(event.target.value);
}}
/>
<br />
<br />
<label>Phone:</label>
<br />
<input
className="userPhone"
name="userPhone"
type="text"
placeholder="555555555"
onChange={(event) => {
setPhone(event.target.value);
}}
/>
<br />
<br />
<input
className="submitButton"
type="submit"
value="Add member"
onClick={addUser}
/>
<hr />
</form>
);
}
function Users(props) {
console.log("props", props); //empty
return (
<>
<table>
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Phone</th>
</tr>
<tr>
<td> {props.firstName} </td>
<td> {props.lastName} </td>
<td> {props.phone} </td>
</tr>
</thead>
</table>
</>
);
}
function Application(props) {
console.log('props', props); //empty
Users
return (
<section>
<Form />
<Users value={props} />
</section>
);
}
export default Application;
非常感谢!
要在组件之间通信，你应该传递父组件上定义的函数，并将其作为参数传递。你用add方法做了什么，在useState上设置它是没有意义的，你只需要把它作为一个正常的函数来使用。
下面是相同的例子，但做了一些修改使其工作:
function Form({ add }) {
// const [state, setState] = useState({ add });
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const [phone, setPhone] = useState(0);
const addUser = () => {
// setState({
add({
firstName: firstName,
lastName: lastName,
phone: phone
});
// return state;
};
return (
<form
onSubmit={e => {
e.preventDefault();
}}
>
<h1>Team Management</h1>
<label>First name:</label>
<br />
<input
className="userFirstname"
name="userFirstname"
type="text"
placeholder="First Name"
onChange={event => {
setFirstName(event.target.value);
}}
/>
<br />
<br />
<label>Last name:</label>
<br />
<input
className="userLastname"
name="userLastname"
type="text"
placeholder="Last Name"
onChange={event => {
setLastName(event.target.value);
}}
/>
<br />
<br />
<label>Phone:</label>
<br />
<input
className="userPhone"
name="userPhone"
type="text"
placeholder="555555555"
onChange={event => {
setPhone(event.target.value);
}}
/>
<br />
<br />
<input
className="submitButton"
type="submit"
value="Add member"
onClick={addUser}
/>
<hr />
</form>
);
}
function Users({ users }) {
return (
<>
<table>
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Phone</th>
</tr>
{users.map(user => (
<tr>
<td> {user.firstName} </td>
<td> {user.lastName} </td>
<td> {user.phone} </td>
</tr>
))}
</thead>
</table>
</>
);
}
export default function App() {
const [users, setUsers] = useState([]);
const addUser = user => setUsers([...users, user]);
return (
<section>
<Form add={addUser} />
<Users users={users} />
</section>
);
}
你可以在stackblitz上看到它:https://stackblitz.com/edit/react-cehone
您通过value作为道具，但您没有从value获得数据，我认为这可能会起作用。
function Users(props) {
console.log("props", props); //nothing here
return (
<>
<table>
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Phone</th>
</tr>
<tr>
<td> {props.value.firstName} </td>
<td> {props.value.lastName} </td>
<td> {props.value.phone} </td>
</tr>
</thead>
</table>
</>
);
}
或者你可以直接传递value而不是props
function Users({value}) {
console.log("props", props); //nothing here
return (
<>
<table>
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Phone</th>
</tr>
<tr>
<td> {value.firstName} </td>
<td> {value.lastName} </td>
<td> {value.phone} </td>
</tr>
</thead>
</table>
</>
);
}
function Application(props) {
return (
<section>
<Form />
<Users value={props} />
</section>
);
}
export default Application;
你正在传递道具给用户组件，但我认为你没有验证这些道具在他们有一些价值。在将props传递给Users组件之前，尝试控制它们。
function Application(props) {
console.log('props', props); //if you are getting here then pass to Users
return (
<section>
<Form />
<Users value={props} /> //If not getting props then pass string like 'props' to see that in Users component where you console the props
</section>
);
}
现在当用户组件呈现
时检查控制台function Users(props) {
console.log("props", props); //now check here when it renders
return (
//your render data
);
}
当你使用useState钩子时，为什么你在addUser函数中使用setState ?使用useState钩子中的第二个参数来设置状态。