设置状态时如何对字符串应用方法,反应钩子

时间:2020-03-16 08:50:17

标签: reactjs react-hooks use-effect use-state

在设置字符串时,我试图拆分字符串。如果我尝试对其应用方法,React会给出错误“ TypeError: 未定义”(例如string.split(“ _”))

但是,如果我不尝试应用该方法,则字符串将正确显示。 e头可以实现在设置状态之前应用该方法吗?

  const [data, setData] = useState([]);
  const [photoArray, setPhotoArray] = useState([]);
  const [photoNum, setPhotoNum] = useState(0);
  const [photoName, setPhotoName] = useState("");

  useEffect( () => {
    const fetchData = async () => {
      const result = await axios(
        {
            url: 'http://localhost:1000',
            method: 'GET',
            },
        );
      const result2 = await axios(
        {
            url: 'https://someurl.com',
            method: 'GET'
        },
      )
        setData(result2.data.items)

      }
    fetchData();
  }, []);

  useEffect( () => {
    setPhotoArray(data.map( photo => photo.name))
  },[data])

  useEffect( () => {
    //This doesn't work
    setPhotoName(photoArray[0].split('_').join(' ')
    //This works:
    // setPhotoName(photoArray[0])
  },[photoArray])

我还可以正确使用useEffect吗? (3次,每次等待一个setSate申请另一个)

3 个答案:

答案 0 :(得分:0)

您必须检查undefined,如下所示

useEffect( () => {
    setPhotoName(photoArray[0] ? photoArray[0].split('_').join(' ') : '')
  },[photoArray])

如果您使用的是Typescript 3.7或更高版本,则可以使用Optional Chaining并执行未定义的检查。

useEffect( () => {
    setPhotoName(photoArray?.[0]?.split('_').join(' ')
  },[photoArray])

答案 1 :(得分:0)

您缺少括号。试试这个。

from selenium import webdriver
from time import sleep
from selenium.webdriver.common.by import By

from selenium.webdriver.support.select import Select
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.action_chains import ActionChains


login_url = 'https://jobs.commerzbank.com/index.php?ac=login'

driver = webdriver.Chrome()
driver.implicitly_wait(5)
driver.maximize_window()

driver.get(login_url)
driver.find_element(By.ID, 'nav_login').click()
driver.find_element(By.CSS_SELECTOR, 'div.popover-content #quick-login-username').send_keys('SmthShift_123')
driver.find_element(By.CSS_SELECTOR, 'div.popover-content #quick-login-password').send_keys('7/B!yzRd8wuK!N2')
driver.find_element(By.CSS_SELECTOR,"div.popover-content #quick_login_form button[type='submit']").click()

driver.get('https://jobs.commerzbank.com/index.php?ac=application&jobad_id=30670')
driver.find_element(By.CSS_SELECTOR, ".applicationform-tab[data-pagenumber='6']").click()

select = Select(
    WebDriverWait(driver, 10).until(EC.presence_of_element_located((By.CSS_SELECTOR, "select#upload_category"))))
select.select_by_visible_text("Lebenslauf")
WebDriverWait(driver, 10).until(EC.presence_of_element_located((By.CSS_SELECTOR, "input#upload_file")))

e = driver.find_element(By.CSS_SELECTOR, "input#upload_file")
# Hover over and wait for tooltip to appear
action = ActionChains(driver)
action.move_to_element_with_offset(e, 5, 5)
action.perform()
sleep(3)

# Now, let's search for a hidden input and send keys
e = driver.find_element(By.CSS_SELECTOR, "input[name='attachment']")
e.send_keys("/<path>/CV.pdf")

# And click to upload:
e = driver.find_element(By.CSS_SELECTOR, "input#start_file_upload_button")
e.click()

答案 2 :(得分:0)

我试图在没有setState的情况下设置setState。解决方案是在实际设置数组状态时应用split()方法。

    useEffect( () => {
      setPhotoArray(data.map(photo => photo.name.split('_').join(' ')))
    },[data])

    useEffect( () => {
      setPhotoName(photoArray[0])
    },[photoArray])