如何从状态设置输入的值（React应用程序）

Question

希望你做得很好！我希望根据从 props 收到的状态设置输入的值！我可以在占位符中设置“个人资料”状态的所有信息，但是当将其放入值字段时，它不会显示任何内容，这是我的代码和我使用的表单：

                        <Form
                            name="basic"
                            wrapperCol={{ span: 24 }}
                            onFinish={onUpdate}
                            onFinishFailed={onFinishFailed}>
                            <FormItem>
                                <Input prefix={<ContactsTwoTone />} placeholder={profile.name} />
                            </FormItem>

                            <FormItem name="email"
                                rules={[
                                    {
                                        type: 'email',
                                        message: 'The input is not valid E-mail!',
                                    }
                                ]}
                            >
                                <Input value={profile.email} name="name" prefix={<MailTwoTone />} placeholder={profile}  />
                            </FormItem>
                            <FormItem name="mobile" value={profile.mobile} >
                                <Input value={profile.mobile} name="mobile" prefix={<PhoneTwoTone />} placeholder={profile.mobile} />
                            </FormItem>
                            <FormItem name="addres">
                                <Input name="addres" prefix={<HomeTwoTone />} placeholder={profile.addres} />
                            </FormItem>
                            <FormItem name="description">
                                <Input.TextArea name="description" placeholder="description" rows={4} prefix={<ContainerTwoTone />} />
                            </FormItem>
                            <FormItem>
                                <Button className="width-100" type="primary" htmlType="submit" onClick={onUpdate} >Update</Button>
                            </FormItem>


                        </Form> ``` 

the useEffect function and the declaration of state : 

const [visible, setVisible] = useState(false);
const FormItem = Form.Item;
const [profile, setProfile] = useState({});


useEffect(() => {
    setProfile(props.profile); 

},[props.profile] );
const showDrawer = () => {
    setVisible(true);
}; 

Answer 1

我希望根据从 props 收到的状态设置输入的值！

如果您只是想设置状态的输入，这里有一个简单的示例。

解决方案和演示

https://codesandbox.io/p/devbox/1q0ftq

import { useState } from "react";

const initialValue = "John";

const App = () => {
  const [name, setName] = useState(initialValue);

  console.log("state: ", name);

  const handleChange = (event) => {
    const value = event.target.value;
    setName(value);
  };

  return (
    <div>
      <h2>Form</h2>
      <pre>Type in the input...</pre>
      <form>
        <input type="text" onChange={handleChange} value={name} />
      </form>
      <pre>state: {name}</pre>
    </div>
  );
};

export default App;

关于您的问题的其余部分和示例代码，您似乎可能认为 props 应该根据您的useEffect.

这里有几个问题。您在您的useEffect. 这是多余的，因为当 props 改变时，React 已经触发了重新渲染。所以，useEffect这里没有必要或不适用。新值已经可以通过 props 获得。我们可以简单地在我们的组件中使用它，因为知道 props 是最新的。这使得问题变得更加简单。

您似乎本质上是在询问如何将道具传递到您的表单中。下面是一个具有可编辑配置文件部分的示例，用于管理配置文件状态。表单部分只是从状态读取值并显示配置文件信息。这说明了您所描述的所需行为。表单只是一个接收作为 props 传递的配置文件状态的组件。

配置文件字段的值依赖于状态。表单组件依赖于基于该状态的 props。

将 props 传递给组件的示例

https://codesandbox.io/p/devbox/dawn-cloud-sbxmoz

import { useState } from "react";

const initialProfile = {
  firstName: "John",
  lastName: "Doe"
};

const Form = ({ firstName, lastName }) => (
  <div>
    <h2>Form</h2>
    <pre>Values based on profile...</pre>
    <form>
      <input
        label="First Name"
        type="text"
        name="firstName"
        value={firstName}
      />
      <input label="Last Name" type="text" name="lastName" value={lastName} />
    </form>
  </div>
);

const App = () => {
  const [profileFields, setProfileFields] = useState(initialProfile);

  const { firstName, lastName } = profileFields;

  console.log("profile fields: ", profileFields);

  const handleChange = (event) => {
    const { name, value } = event.target;
    setProfileFields(() => {
      return {
        ...profileFields,
        [name]: value
      };
    });
  };

  return (
    <div>
      <Form firstName={firstName} lastName={lastName} />
      <h2>Profile</h2>
      <pre>Type to edit profile fields...</pre>
      <form>
        <input
          label="First Name"
          type="text"
          onChange={handleChange}
          name="firstName"
          value={firstName}
        />
        <input
          label="Last Name"
          type="text"
          onChange={handleChange}
          name="lastName"
          value={lastName}
        />
      </form>
    </div>
  );
};

export default App;

解释和资源

在示例中，您可以输入配置文件字段以查看如何通过 props 更新表单值。在顶部表单中输入不会更新值，因为这些值是只读的并且“从 props 设置”。

您可能不需要只读表单，但这只是基于您的示例。您可以将您的配置文件数据作为 props 传递给任何需要它的组件。

我认为我希望在这里传达的想法是考虑您的个人资料数据（您的状态）的“单一事实来源”，并根据其他组件需要使用它来决定您希望其存在的位置。

这通常称为受控组件与非受控组件。这个概念经常出现在表单输入中，因为使用 React 状态控制表单对于访问和验证用户输入的输入非常有用，而以传统方式使用 HTML 输入很难实现这一点。

资源

https://react.dev/learn/sharing-state- Between-components#受控和非受控-组件

希望这有帮助。