How can I use useEffect and store an array in Reactnative?-CodePudding

I have data from redux called targetFarm. targetFarm.children contains these array object data.

targetFarm.children = [
{name: 'pizza'},
{name: 'buger'},
{name: 'robster'},
{name: 'water'},
]

I want to put data in targetFarm.children into gyetong using useEffect and setgyeTong hooks. As an array object value like below

expecter answer 

gyetong = [
    {'pizza'},
    {'buger'},
    {'robster'},
    {'water'},
]

But with my code it only takes one array.

gyetong = ["pizza"]

How can i fix my code?

const App = () => {
    const { targetFarm } = useAppSelector((state) => state.farm);

    const [gyetong, setgyeTong] = useState([]);

    return (
        <Container>
{targetFarm.children.map((item, index) => {
        
            useEffect(() => {
                    setgyeTong([item.name])
                }, [item]);

            })}

        </Container>
    )
}

CodePudding user response：

For your information, you cannot the expected answer of gyetong you mentioned. I assume from the code, you want to have an array of array containing single item.

You can instead of this, directly do this:

const App = () => {
  const { targetFarm } = useAppSelector((state) => state.farm);

  const [gyetong, setgyeTong] = useState(
    targetFarm.children.reduce((p, n) => {
      p.push([n.name]);
      return p;
    }, [])
  );

  return <Container>{/* your code here */}</Container>;
};

By default gyetong will have the values

gyetong = [
    ['pizza'],
    ['buger'],
    ['robster'],
    ['water'],
]

CodePudding user response：

Looks like very wrong expectation and usecase for this code!

gyetong = [
    {'pizza'},
    {'buger'},
    {'robster'},
    {'water'},
]

above will not possible, below possible result can be

gyetong = [
    'pizza',
    'buger',
    'robster',
    'water',
]

If we consider usecase, then there are two ways you can build your component properly,

Way 1:

const App = () => {
  const { targetFarm } = useAppSelector((state) => state.farm);

  return (
    <Container>
      {targetFarm.children.map((item) => {
        return item.name;
      })}
    </Container>
  );
};

Above is not to use extra state and render values directly.

Way 2:

const App = () => {
  const { targetFarm } = useAppSelector((state) => state.farm);

  const [gyetong, setgyeTong] = useState([]);

  useEffect(() => {
    const newGyetong = targetFarm.children.map((item) => {
      return item.name;
    });
    setgyeTong(newGyetong);
  }, [targetFarm]);

  return (
    <Container>
      {gyetong.map((item, index) => {
        return item.name;
      })}
    </Container>
  );
};

In case you have to use state in component!

I hope this will help you! Happy coding...

CodePudding user response：

You are doing set only one item at a time here

setgyeTong([item.name])

here set only one item at a time which was the last item,
you need to append that item into the array gyetong

setgyeTong({ ... gyetong, item.name });