Question

我正在由选择器选择一些图像，并将其通过道具。

let createBoard = function(value) {
  container.style.gridTemplateColumns = `repeat(${value}, 1fr)`;
  container.style.gridTemplateRows = `repeat(${value}, 1fr)`;
  for (let i = 0; i < value * value; i++) {
    board = document.createElement("div");
    board.className = "board";
    board.id = "pixel" + i;
    container.appendChild(board);
    let mouseEnter = function() {
      document.getElementById("pixel" + i).style.backgroundColor = "blue";
    };
    board.addEventListener("mouseenter", mouseEnter);
  }
};

createBoard(2);

function removeBoard() {
  $(".board").remove();
}

let reset = document.getElementById("reset");
reset.addEventListener("click", function(e) {
  removeBoard();
  createBoard(parseFloat(prompt("Enter a Value", "0")));
});

现在，我需要拍摄这些图像并在我的PhotosPage组件中使用它们。

  const [ImageSource, setImageSource] = useState([]);
  const [ImageSourceviewarray, setImageSourceviewarray] = useState([]);

  addImages = ()=>{
    ImagePicker.openPicker({
      width: 200,
      height: 200, compressImageMaxHeight: 400,
      compressImageMaxWidth: 400, cropping: true, multiple: true
    }).then(response => {
      let tempArray = []
      setImageSource(response)
      response.forEach((item) => {
        let image = item.path
        tempArray.push(image)
        setImageSourceviewarray(tempArray)
      })
    })
  }

return(
    <PhotosPage images = {[...ImageSourceviewarray]}/>
);

但是，它不起作用。仅出现图像的图像[0]。

Answer 1

我想问题是图像数组。例如，如果ImagePicker响应是两个图像的数组，则在这里：

response.forEach((item) => {
        let image = item.path
        tempArray.push(image)
        setImageSourceviewarray(tempArray) <--
      })

当您为第二个图像设置ImageSourceviewarray时，该视图将不会更新，因为您将其设置为相同的对象（tempArray地址未更改）。您可以尝试以下方法：

  ImagePicker.openPicker({
      width: 200,
      height: 200, compressImageMaxHeight: 400,
      compressImageMaxWidth: 400, cropping: true, multiple: true
    }).then(response => {
      setImageSource(response);
      const newImageSourceArray = response.map(item => item.path);
      setImageSourceviewarray(newImageSourceArray);
    })

将数组作为prop传递给组件时出错

1 个答案: