Блог

Я пытаюсь отобразить состояние ownedStock, если в реквизитах stockInfo есть значение. Когда есть значение, stockInfo выглядит следующим образом [{имя: «TSLA»,цена: 456}]. Однако после запуска useEffect ownedStock выглядит следующим образом [{stock:[{name:»TSLA»,цена: 456}]}]. Когда я пытаюсь сопоставить это, как сейчас, я получаю пустое значение. Я никогда не видел ни одного примера использования Object.values… в инструкции return. Как я могу правильно выполнить итерацию ownedStock, чтобы значения отражались?

 const StocksOwned = ({stockInfo}) => {
    const [ownedStock, setOwnedStock] = useState([]);
    console.log(stockInfo)

    const newStock = stock => {
        const newStocks = [ ...ownedStock, {stock}];
        setOwnedStock(newStocks)
    }
    
    useEffect(() => {
        if(stockInfo[0]){
        newStock(stockInfo)
        } else {
            setOwnedStock([]);
        }
    },[stockInfo])

    console.log(ownedStock)
   return(
                    { {ownedStock} ? 
                    <TableBody>
                    {ownedStock.map((stock, index) => (
                        <StyledTableRow key = {index} >
                            <StyledTableCell component="th" scope="row">
                                {stock.name}
                            </StyledTableCell>
                            <StyledTableCell align="right">${stock.price}</StyledTableCell>
                            <StyledTableCell align="right">{stock.owned}</StyledTableCell>
                            <StyledTableCell align="right">
                                <ThemeProvider theme={theme}>
                                    <Button variant="contained" color="secondary" className={classes.margin} onClick={event => handleClick(event, index)}>
                                        SELL
                                    </Button>
                                </ThemeProvider>
                            </StyledTableCell>
                        </StyledTableRow>
                        ))}
                    </TableBody>
    )

  

Я полагаю, что ownedStock = [{stock:[{name:"TSLA",price: 456}]}] так

 ownedStock.map((myObj)=>{
    return myObj.stock.map((oneObj)=>{
        return (<div>{oneObj.name}</div>)
   })
})
  

Я думаю, вам следует изменить свою newStock функцию, чтобы добавить новый объект в качестве объекта в массив, например

     const newStock = stock => {
        const newStocks = [ ...ownedStock, stock];
        setOwnedStock(newStocks)
    }
  

Это создаст новый массив с ownedStock скопированным массивом и добавит новый элемент в этот массив stock