有没有办法修复 Type 'null' 不能用作索引 type.ts(2538)

问题描述

import { OrbitControls,Environment } from "@react-three/drei"
import { HexColorPicker } from 'react-colorful'
import * as THREE from 'three'
import React,{Suspense,useRef,useState } from 'react'
import { useGLTF } from '@react-three/drei'
import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader'
import { proxy,useSnapshot } from 'valtio'

import "./index.scss"
const state = proxy({
    current:null,dress_color: "#bc4b4b",items:{
      M003:"#bc4b4b",mat:"#bc4b4b",M001:"#bc4b4b",M002:"#bc4b4b",M007:"#bc4b4b",M008:"#bc4b4b",MM001:"#bc4b4b",flower:"#bc4b4b",}
  
  })
  
  type GLTFResult = GLTF & {
    nodes: {
      Mesh_0: THREE.Mesh
      Mesh_1: THREE.Mesh
      Mesh_2: THREE.Mesh
      Mesh_3: THREE.Mesh
      Mesh_4: THREE.Mesh
      Mesh_5: THREE.Mesh
      Mesh_6: THREE.Mesh
      Plane: THREE.Mesh
    }
    materials: {
      ['Material.M003']: THREE.MeshStandardMaterial
      ['mat']: THREE.MeshStandardMaterial
      ['Material.M001']: THREE.MeshStandardMaterial
      ['Material.M002']: THREE.MeshStandardMaterial
      ['Material.M007']: THREE.MeshStandardMaterial
      ['Material.M008']: THREE.MeshStandardMaterial
      ['None.MM001']: THREE.MeshStandardMaterial
      ['flower']: THREE.MeshStandardMaterial
    }
  }
  
  
 function Model(props:JSX.IntrinsicElements['group']) {
    
    const group = useRef<THREE.Group>()
    const snap = useSnapshot(state)
    const { nodes,materials } = useGLTF('/untitled.glb') as GLTFResult
    const [hovered,set] = useState(null)
    return (
      <group ref={group} {...props} dispose={null}
      onPointerOver={(e:any) => {
        e.stopPropagation();set(e.object.material.name)
      }}
      onPointerOut={(e) => {
        e.intersections.length === 0 && set(null)
      }}
      onPointerDown={(e:any) => {
        e.stopPropagation();(state.current = e.object.material.name)
      }}
      onPointerMissed={(e) => {
        state.current = null
      }}
      >
        <group rotation={[-Math.PI / 2,0]}>
          <mesh material-color={snap.items.M003} geometry={nodes.Mesh_0.geometry} material={materials['Material.M003']} />
          <mesh material-color={snap.items.mat} geometry={nodes.Mesh_1.geometry} material={materials['mat']} />
          <mesh material-color={snap.items.M001} geometry={nodes.Mesh_2.geometry} material={materials['Material.M001']} />
          <mesh material-color={snap.items.M002} geometry={nodes.Mesh_3.geometry} material={materials['Material.M002']} />
          <mesh material-color={snap.items.M007} geometry={nodes.Mesh_4.geometry} material={materials['Material.M007']} />
          <mesh material-color={snap.items.M008} geometry={nodes.Mesh_5.geometry} material={materials['Material.M008']} />
          <mesh material-color={snap.items.MM001} geometry={nodes.Mesh_6.geometry} material={materials['None.MM001']} />
        </group>
        <mesh material-color={snap.items.flower} geometry={nodes.Plane.geometry} material={materials['flower']} position={[0,52.7,0]} />
      </group>
    )
  }
  
  function Picker(){
    const snap = useSnapshot(state)
    return(
      <div className="picker">
          <HexColorPicker style={{
    position: 'absolute',right: '8%',top: '20%',transform: 'translate(-50%,-50%)'}}
          color={snap.items[snap.current]} 
          onChange={(color) => (state.items[snap.current] = color)}/>
      </div>
    )
  }

const EditableObject = () => {
    return (
        <div id="the-3d-object">
            <>
            <Canvas
                camera={{ position: [40.1813,10,70],fov: 33}}
            >
                
                {/* <ambientLight intensity={0.5} /> */}
                <axesHelper />
                <Suspense fallback={null}>
                    <Model />
                    <Environment files="hdr.hdr" />
                </Suspense>
                <OrbitControls/>
                
            </Canvas>
            <Picker/>
            </>
        </div>
    )
}

useGLTF.preload('/untitled.glb')
export default EditableObject

在 div 中的 Picker 函数中找到颜色线，在该线下为 snap.current，这些线应该可以帮助我从面板中选择颜色，并将其应用于网格和材料，但我有那个错误说 Type 'null' 不能用作索引。当我在活动之前使用电流并帮助我选择材料时，但是当我尝试在此功能中使用它时，我收到该错误，我准备了其他帖子和文档，但我没有找到任何答案或修复它的方法。 down是错误所在的代码部分

    const snap = useSnapshot(state)
    return(
      <div className="picker">
          <HexColorPicker style={{
    position: 'absolute',-50%)'}}
          color={snap.items[snap.current]} 
          onChange={(color) => (state.items[snap.current] = color)}/>
      </div>
    )
  }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

three.js tsx