如何在 React 上修改数组并将新元素添加到数组状态

Question

我是基于函数的 React 新手（没有类），尝试使用 state redux 从组件中获取一个数组，并将其添加到一个新数组中，因为我只需要添加两个属性多个 Select 组件的元素。我尝试了不同的东西，但没有运气。我会提供任何帮助。这是我的代码：

const FormInfo = () => {

    //reading an array from another component
    const arrayFromOtherComponent = useSelector(state => state.otherComponente.array);

    //creating a local state with empty array
    const [state, setState] = useState([]);

    //creating new state to add this object to the array state
    const [ item, setItem ] = useState({
        value: '',
        label: ''
    })

    //looping arrayFromOtherComponent to get some properties and add to state
    const callSelect = () => {
        arrayFromOtherComponent.map( var => (
            setItem({
                value: '`{var.id}`',            -> I cant' read the var object
                label: '`{var.name}`'           -> I cant' read the var object
            }),
            setState( state.concat(item) )      -> Is not updating the array state
        ));
    }

    //Calling function to update array
    useEffect ( () => {
        if(arrayFromOtherComponent){
            callSelect() }
    }, []);
    .
    .
    .

    //Using a Multiple Select to return the info
    return (
        .
        .
        .
            <Select
                isMulti
                options={state}       -> this should iterate the array state to show options
                value={state.selectedOption}
                onChange={handleChange}
                closeMenuOnSelect={false}
            />
        .
        .
        .

    );
}
export default FormInfo;

Answer 1

const callSelect = () => {
    arrayFromOtherComponent.map( var => (
        setItem({
            value: `${var.id}`,            //Use $ before {} and just inside `` not inside '``'
            label: `${var.name}`           
        }),
        setState( state.concat(item) )      -> Is not updating the array state
    ));
}

请详细说明您想要实现的目标。

Answer 2

callSelect 方法可以是这样的：

const callSelect = () => {
    const initialArray = arrayFromOtherComponent.map((element) => {
      return {
        value: element.id,
        label: element.name
      };
    });
    setState(initialArray);
  };

如何在 React 上修改数组并将新元素添加到数组状态

How to modify an array and add new element to array state on react

arrays

select

state

element

reactjs