如何在 Prime React 中预加载数据答案

【问题标题】：How preload data in prime React如何在 Prime React 中预加载数据
【发布时间】：2022-08-17 14:26:16
【问题描述】：

我必须在下拉列表中预加载信息，但我的 props.element 给了我一个代码，而不是最终用户可以理解的短语。

这是我的定义。

    const [validations, setValidations] = useState([]);
    const [selectedStatusFrom, setSelectedStatusFrom] = useState(null)
    const [selectedStatusTo, setSelectedStatusTo] = useState(null)
    const [selectedGroups, setSelectedGroups] = useState([]);
    const [selectedRoles, setSelectedRoles] = useState([]);
    const [selectedUsers, setSelectedUsers] = useState([]);
    const [selectedStatusToCheckDuplicity, setSelectedStatusToCheckDuplicity] = useState([]);
    const [time, setTime] = useState(0);
    const [name, setName] = useState(\'\');
    const [active, setActive] = useState(true);
    const[confirmDelete, setConfirmDelete]=useState(false);
    const options = [{ label: \'FIFO\', name: \'Antiguos primero\'},{ label: \'LIFO\', name: \'Nuevos primero\' },{ label: \'FLIFO\', name: \'Intercalados\'}];
    const[assignStrategy, setAssignStrategy]=useState([options]);



    useEffect(async () => {
        if (props.pipeline._id) preloadData()
    }, []);


    const preloadData = () => {
        setSelectedStatusFrom(getStatus(props.pipeline.statuses, props.pipeline.transition.fromStatusId))
        setSelectedStatusTo(getStatus(props.pipeline.statuses, props.pipeline.transition.toStatusId))
        setSelectedGroups(chargeArray(props.groups, \'id\', props.pipeline.groups, \'groupId\'))
        setSelectedRoles(chargeArray(props.roles, \'id\', props.pipeline.roles, \'roleId\'))
        setSelectedUsers(chargeArray(props.users, \'id\', props.pipeline.users, \'userId\'))
        setSelectedStatusToCheckDuplicity(chargeArray(props.statuses, \'id\', props.pipeline.statusToCheckDuplicity, \'statusId\'))
        setValidations(props.pipeline.validations)
        setName(props.pipeline.processName)
        setTime(props.pipeline.time)
        setActive(props.pipeline.active)
        setAssignStrategy(props.pipeline.assignStrategy)
        
    }

如何预加载的名称属性选项下拉列表中的数组 id=\"type\" props.pipeline.assignStrategy 可以包含 FIFO、LIFO、FLIFO

<div>
                    <h5>Tipo de reparto</h5>
                    <hr/>
                    <div className=\"p-fluid p-formgrid p-grid\">

                        <div className=\"p-field p-col\">
                            <label className=\"p-col-fixed\" htmlFor=\"strategy\">Reparto</label>
                            <div className=\"p-col\">
                            <Dropdown id={\'strategy\'} appendTo={document.body} value={assignStrategy} options={options} optionLabel=\"name\" onChange={(e) => setAssignStrategy(????????????)}  placeholder=\"Seleccione Tipo Reparto\"/>

                            </div>
                        </div>
                    </div>
                </div>

我正在使用 Primereact

看起来您正在将 value={assignStrategy} 分配给整个数组，这是不正确的，它应该只是一个值或 NULL 来启动 const[assignStrategy, setAssignStrategy]=useState(null);

标签： javascript node.js reactjs arrays primereact

【解决方案1】：

我认为您必须在 assignStrategy 中传递单个值。因为 Prime Dropdown 在值字段中接受单个值并显示所选值。

  const options = [
    { label: 'FIFO', name: 'Antiguos primero' },
    { label: 'LIFO', name: 'Nuevos primero' },
    { label: 'FLIFO', name: 'Intercalados' },
  ];
  const [assignStrategy, setAssignStrategy] = React.useState(null);

  React.useEffect(() => {
    setAssignStrategy('FLIFO');
    // This is where you set below code, but make sure you pass single.
    // value instead of an array/object.
    // setAssignStrategy(props.pipeline.assignStrategy)
  }, []);

  <Dropdown
    id={'strategy'}
    appendTo={document.body}
    value={assignStrategy}
    options={options}
    optionLabel="name"
    optionValue="label"
    onChange={(e) => setAssignStrategy(e.value)}
    placeholder="Seleccione Tipo Reparto"
  />

请查看此演示：https://stackblitz.com/edit/react-ts-3z7wkl?file=App.tsx

【讨论】：