三根光纤阵列内部网格的更新

Question

我有一个roundedBox遥测(myShape)数组

我想知道我能不能改变数组中某个形状的位置，

我可以用我想要的位置代替我想要的索引的形状，但这不是很好，

我不想创建一个新的，我只想更新已经存在的位置，并在画布上更新它。

我现在拥有的是：

这就是我想做的: shapes1.props.position = 150，0,150

const [shapes, setShapes] = useState([<MyShape key={0} position={[0, 0, 0]} />, <MyShape key={1} position={[100, 0, 100]} />, <MyShape key={2} position={[200, 0, 200]} />])
useEffect(() => {
  function handleKeyUp(event) {
    if (event.key === 'r') {
      shapes[1] = <MyShape key={1} position={[150, 0, 150]} />
      // shapes[1].props.position = [150, 0, 150];
      setShapes([...shapes]);
      console.log(shapes)
    }
  }
  window.addEventListener('keyup', handleKeyUp)
  return () => {
    window.removeEventListener('keyup', handleKeyUp)
  }
}, [shapes])

return (
  <group >
    {[...shapes]}
  </group>
)

Answer 1

shapes[1] = <MyShape key={1} position={[150, 0, 150]} />

代码中的这一行直接修改状态，这是个坏主意。您可以阅读更多关于它的这里。

我建议不要在你的状态中存储元素。把这个职位放在你的州里。

我还没有测试过它，但它可能会是这样的：

const [positions, setPositions] = useState([
  [0, 0, 0],
  [100, 0, 100],
  [200, 0, 200],
]);

useEffect(() => {
  function handleKeyUp(event) {
    if (event.key === 'r') {
      setPositions((prevPositions) => {
        const newPositions = [...prevPositions];
        // You might want to check for null index here.
        newPositions[1] = [150, 0, 150];
        return newPositions;
      });
    }
  }
  window.addEventListener('keyup', handleKeyUp);
  return () => {
    window.removeEventListener('keyup', handleKeyUp);
  };
}, [shapes]);

return (
  <group>
    {positions.map((position, idx) => (
      // Using idx here for simplicity purposes.
      <MyShape key={idx} position={position} />
    ))}
  </group>
);