React：如果字符串匹配并设置状态，则检查数组

Question

我有以下数组：

[
    "/test/static/media/its9-odc_d.9d5de720.png",
    "/test/static/media/its9-odc_m.178c1879.png",
    "/test/static/media/its9-odc_w.5e70ca59.png",
    "/test/static/media/its9-odc_y.8cf41473.png"
]

当我点击一个按钮时，_d、_m、_w 或 _y 被保存为 React 状态 (timeperiods)。

我需要一个函数，它将与我的timeperiods 匹配的字符串保存在另一个 React 状态 (imageSource)，以便我可以渲染图像。

这是我迄今为止尝试过的，但我总是返回 'yay'，当我尝试 setImageSource 时，我收到无限循环错误。

  const imageForTimeperiod = () => {
    images.forEach((img) => {
      if (timeperiod && img.split('.')[0].includes(timeperiod)) {
        console.log('yay');
        // setImage(img);
      }
    })
  };

{Object.entries(Timeperiods.timeperiods).map((entries) => {
    return (
        <Button onClick={() => setTimeperiod(entries[1].file)}>
            {entries[0]}
        </Button>
    );
})}

最后：

我点击按钮1 Day，它将时间段设置为_d，并显示图像/test/static/media/its9-odc_d.9d5de720.png。

Answer 1

您可以在单击按钮上传递timeperiod 的名称，然后根据名称设置图像和timePeriod 状态。

const { useState } = React;

const App = () => {
  const [image, setImage] = useState(null);
  const [timePeriod, setTimePeriod] = useState(null);
  
  const images = [
    "/test/static/media/its9-odc_d.9d5de720.png",
    "/test/static/media/its9-odc_m.178c1879.png",
    "/test/static/media/its9-odc_w.5e70ca59.png",
    "/test/static/media/its9-odc_y.8cf41473.png"
  ];
  
  const timePeriods = ['_d', '_m', '_w', '_y'];

  const handleClick = (v) => {
    const foundImage = images.find(name => name.includes(v));
    setImage(foundImage || null);
    setTimePeriod(v);
  }


  return <div>
  {timePeriod}
  <br />
  {image && <img src={image} />}
  <br />
  {timePeriods.map((v, i) => {
    return (
       <button onClick={() => handleClick(v)}>
          {v}
       </button>
    )
  })}
  </div>
}

ReactDOM.render(
  <App />,
  document.getElementById("root")
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>