在 .map() 之后获取未定义的数组

Question

我试图在 useState 的数组中插入第一个值，但它未定义。我知道该数组包含该值。

    let {id} = useParams();
    const [currentJacuzzi, setCurrentJacuzzi] = useState();
    const {jacuzzis} = useContext(JacuzziContext);
    const [mappedJacuzzis, setMappedJacuzzis] = useState([]);

    useEffect(() => {
        const tempArr = jacuzzis.filter(jacuzzi => jacuzzi.brand === id);
        const mapped = tempArr.map((obj) => (
            {
                name: obj.name,
                about: obj.aboutProduct,
                image: obj.images[0].image
            }
        ));
        setMappedJacuzzis(mapped); 
        setCurrentJacuzzi(mappedJacuzzis[0]); //-- mappedJacuzzis contains an array with objects at this point. But 
    }, [jacuzzis]);

mappedJacuzzis 包含一个包含 3 个对象的数组，我希望获得一个仅包含此数组中第一个对象的新值。 currentJacuzzi 应包含第一个值，但未定义。

   <Row className="justify-content-center">
     <h1>{currentJacuzzi.name}</h1>
   </Row>
   <Row className="justify-content-center mr-5 ml-5">
     <p>{currentJacuzzi.about}</p>
   </Row>

Answer 1

如果 mappedJacuzzis 只设置了这个值，你不能只使用 setCurrentJacuzzi(mapped[0]); 吗？ setMappedJacuzzis 不会立即更改 mappedJacuzzis 的值，您甚至还没有将 mappedJacuzzis 放在依赖数组中。

Answer 2

在添加当前按摩浴缸之前先设定条件像这样，因为在第一个渲染中，它的值是 undefined

import "./styles.css";
const dummyData = [
  {
    id: 1,
    text: "something one"
  },
  {
    id: 2,
    text: 'something two'
  }
]
export default function App() {
  const [mappedJagg, setMappedJagg] = useState([])
  const [currentJagg, setCurrentJagg] = useState()

  useEffect(() => {
    const filtered = dummyData.filter(fi => fi.id === 1)
    const mapped = filtered.map(f => ({
      id: f.id,
      text: f.text
    }))
    setMappedJagg(mapped)
    setCurrentJagg(mapped[0])
  }, [])

  // useEffect(() => {
  //   console.log(currentJagg.text)
  // }, [currentJagg])
  return (
    <div className="App">
      <h1>{currentJagg && currentJagg.text}</h1> // add a condition like this
    </div>
  );
} ```

Answer 3

可能的问题可能是，当您设置 setMappedJacuzzis(mapped) 并在可能尚未更新的同一块中使用更新状态时。如果你不想这样做，你可以只使用 setCurrentJacuzzi(mapped[0]) 在依赖项数组中使用带有 mappedJacuzzis 的单独 useEffect 挂钩。

第一种方法

    useEffect(() => {
        const tempArr = jacuzzis.filter(jacuzzi => jacuzzi.brand === id);
        const mapped = tempArr.map((obj) => (
            {
                name: obj.name,
                about: obj.aboutProduct,
                image: obj.images[0].image
            }
        ));
        setMappedJacuzzis(mapped); 
        setCurrentJacuzzi(mapped[0]); //-- mappedJacuzzis is a array with objects
    }, [jacuzzis]);

第二种方法

    useEffect(() => {
        const tempArr = jacuzzis.filter(jacuzzi => jacuzzi.brand === id);
        const mapped = tempArr.map((obj) => (
            {
                name: obj.name,
                about: obj.aboutProduct,
                image: obj.images[0].image
            }
        ));
        setMappedJacuzzis(mapped); 
    }, [jacuzzis]);

    useEffect(() => {
      const currentJacuzzi = mappedJacuzzis[0]
      setCurrentJacuzzi(currentJacuzzi);
    },[mappedJacuzzis]);

在 .map() 之后获取未定义的数组

Getting undefined array after .map()

javascript

arrays

reactjs

use-state