javascript - 如何设置状态输入的值(React 应用程序)

Question

希望你一切顺利!我希望根据我从 props 收到的状态来设置 Input 的值!我可以在占位符中设置来自“配置文件”状态的所有信息，但是当把它放在值字段中时它不显示任何内容这是我的代码和我使用的表格:

                        <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

I am looking to set the value of Input from the state that i receivefrom props!

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

解决方案和演示

https://codesandbox.io/s/trusting-swanson-1q0ftq

import { useState } from "react";

const initialValue = "John";

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

  console.log("render");
  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;

关于你的问题的其余部分和示例代码，看起来你可能认为 Prop 应该根据你的 useEffect 通知一些新的状态。

但是，useEffect 会在每次 prop 更新时运行，并且当 prop 更新时，React 已经触发了重新渲染。我们已经可以在我们的组件中使用新值，所以我们不需要搞乱 useEffect 或状态。这将是多余和不必要的。

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

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

将 props 传递给组件的示例

https://codesandbox.io/s/damp-fire-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("render, 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 传递给任何需要它的组件。

我认为我希望在这里传达的想法是为您的配置文件数据(您的状态)考虑一个“单一事实来源”，并决定您希望它存在于何处以及其他组件需要访问它。

希望对您有所帮助。